feat(ui): add x/y axis ticks and labels to category decay preview

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/resources/views/pages/categories/edit.twig

@@ -60,12 +60,44 @@
 
         <section class="mt-6">
             <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Decay preview (0–60 days)</h2>
-            <svg viewBox="0 0 600 200" class="mt-2 w-full max-w-xl rounded border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950" preserveAspectRatio="none">
+            <svg viewBox="0 0 660 240" class="mt-2 w-full max-w-xl rounded border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950">
+                <g class="stroke-slate-200 dark:stroke-slate-800" stroke-width="1">
+                    <line x1="40" y1="10"  x2="640" y2="10"/>
+                    <line x1="40" y1="60"  x2="640" y2="60"/>
+                    <line x1="40" y1="110" x2="640" y2="110"/>
+                    <line x1="40" y1="160" x2="640" y2="160"/>
+                </g>
+                <line x1="40" y1="210" x2="640" y2="210" class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1"/>
+                <line x1="40" y1="10"  x2="40"  y2="210" class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1"/>
+                <g class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1">
+                    <line x1="36" y1="10"  x2="40" y2="10"/>
+                    <line x1="36" y1="60"  x2="40" y2="60"/>
+                    <line x1="36" y1="110" x2="40" y2="110"/>
+                    <line x1="36" y1="160" x2="40" y2="160"/>
+                    <line x1="36" y1="210" x2="40" y2="210"/>
+                    <line x1="40"  y1="210" x2="40"  y2="214"/>
+                    <line x1="190" y1="210" x2="190" y2="214"/>
+                    <line x1="340" y1="210" x2="340" y2="214"/>
+                    <line x1="490" y1="210" x2="490" y2="214"/>
+                    <line x1="640" y1="210" x2="640" y2="214"/>
+                </g>
+                <g font-size="10" text-anchor="end" class="fill-slate-500 dark:fill-slate-400">
+                    <text x="34" y="13">1.0</text>
+                    <text x="34" y="63">0.75</text>
+                    <text x="34" y="113">0.5</text>
+                    <text x="34" y="163">0.25</text>
+                    <text x="34" y="213">0</text>
+                </g>
+                <g font-size="10" text-anchor="middle" class="fill-slate-500 dark:fill-slate-400">
+                    <text x="40"  y="226">0</text>
+                    <text x="190" y="226">15</text>
+                    <text x="340" y="226">30</text>
+                    <text x="490" y="226">45</text>
+                    <text x="640" y="226">60</text>
+                </g>
+                <text x="340" y="238" font-size="10" text-anchor="middle" class="fill-slate-500 dark:fill-slate-400">age (days)</text>
                 <path :d="path()" stroke="currentColor" class="text-indigo-500" fill="none" stroke-width="2"/>
-                <line x1="0" y1="200" x2="600" y2="200" class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1"/>
-                <line x1="0" y1="0" x2="0" y2="200" class="stroke-slate-300 dark:stroke-slate-700" stroke-width="1"/>
             </svg>
-            <p class="mt-1 text-xs text-slate-400">x-axis = age in days (0–60); y-axis = decay multiplier (1.0 → 0).</p>
         </section>
 
         {% if can_write %}
@@ -89,12 +121,11 @@ window.decayPreview = function (initial) {
             return Math.pow(0.5, ageDays / p);
         },
         path() {
-            const w = 600;
-            const h = 200;
+            const x0 = 40, y0 = 10, w = 600, h = 200;
             const points = [];
             for (let i = 0; i <= 60; i++) {
-                const x = (i / 60) * w;
-                const y = h - this.decay(i) * h;
+                const x = x0 + (i / 60) * w;
+                const y = y0 + (1 - this.decay(i)) * h;
                 points.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`);
             }
             return points.join(' ');