Timeline UX: Glow Animation & Auto-Scroll

Details

Raw Data

{
  "id": "6268ee9b-5963-4728-aa41-77631427f868",
  "type": "general",
  "status": "completed",
  "title": "Timeline UX: Glow Animation & Auto-Scroll",
  "description": "New items glow for 2.5s to announce arrival; selected items auto-scroll to center of view",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\">\n<h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">✨ Timeline UX Improvements</h2>\n\n<h3 style=\"color:#22c55e;font-size:1rem;margin:24px 0 12px 0;\">1. Strong Glow Animation for New Items</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;\">When a new kontask appears on the timeline, it now strongly glows for <strong style=\"color:#3b82f6;\">2.5 seconds</strong> to announce its presence:</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:12px 0;\">\n<div style=\"font-size:0.85rem;color:#7f848e;margin-bottom:8px;\">Animation Effects:</div>\n<ul style=\"color:#e0e0e0;margin:0;padding-left:20px;line-height:1.8;\">\n<li><span style=\"color:#3b82f6;\">●</span> Multi-color gradient glow cycles through <span style=\"color:#3b82f6;\">blue</span> → <span style=\"color:#a855f7;\">purple</span> → <span style=\"color:#22c55e;\">green</span></li>\n<li><span style=\"color:#a855f7;\">●</span> Card gets inner glow + outer shadow effect</li>\n<li><span style=\"color:#22c55e;\">●</span> Dot pulses and scales up 1.5x to draw eye</li>\n<li><span style=\"color:#f97316;\">●</span> All animations fade out smoothly after 2.5s</li>\n</ul>\n</div>\n\n<h3 style=\"color:#3b82f6;font-size:1rem;margin:24px 0 12px 0;\">2. Auto-Scroll to Center on Selection</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;\">When you select an item on the timeline (opening its kontask card), the item now <strong style=\"color:#22c55e;\">automatically scrolls to the center</strong> of the timeline view:</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:12px 0;\">\n<div style=\"font-size:0.85rem;color:#7f848e;margin-bottom:8px;\">Behavior:</div>\n<ul style=\"color:#e0e0e0;margin:0;padding-left:20px;line-height:1.8;\">\n<li>Click an item at the <span style=\"color:#ef4444;\">bottom</span> of the list → it scrolls <span style=\"color:#22c55e;\">up</span> to center</li>\n<li>Click an item at the <span style=\"color:#ef4444;\">top</span> of the list → it scrolls <span style=\"color:#22c55e;\">down</span> to center</li>\n<li>Uses <span style=\"color:#3b82f6;\">smooth scrolling</span> for a polished feel</li>\n<li>Works correctly even when kontask preview panel opens</li>\n</ul>\n</div>\n\n<h3 style=\"color:#a855f7;font-size:1rem;margin:24px 0 12px 0;\">📁 Changes Made</h3>\n<pre style=\"background:#2d2d2d;padding:12px;border-radius:6px;overflow-x:auto;color:#e0e0e0;font-size:0.85rem;\">\n<span style=\"color:#56b6c2;\">konui/src/views/</span>\n└── <span style=\"color:#e5c07b;\">flow-timeline-pane.ts</span>  <span style=\"color:#7f848e;\">+121 lines</span>\n    <span style=\"color:#7f848e;\">├─ CSS: @keyframes timeline-announce-glow (lines 411-436)</span>\n    <span style=\"color:#7f848e;\">├─ CSS: @keyframes new-card-glow (lines 448-470)</span>\n    <span style=\"color:#7f848e;\">├─ CSS: @keyframes new-dot-pulse (lines 477-498)</span>\n    <span style=\"color:#7f848e;\">├─ JS: scrollTimelineItemToCenter() (lines 2694-2716)</span>\n    <span style=\"color:#7f848e;\">└─ JS: Extended new-item class to 2.5s (line 3244)</span>\n</pre>\n\n<div style=\"background:linear-gradient(135deg, rgba(34,197,94,0.1), rgba(59,130,246,0.1));padding:16px;border-radius:6px;border-left:3px solid #22c55e;margin-top:20px;\">\n<strong style=\"color:#22c55e;\">✓ Committed:</strong> <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;color:#f97316;\">f734db5d</code>\n</div>\n</div>",
    "requestedAt": "2026-01-11T00:00:00.000Z",
    "requestId": "6e1a7556-375b-4bdc-a52a-92c3a1fa45f7",
    "commitSha": "f734db5d",
    "choices": [
      {
        "label": "Restart konui",
        "value": "Please restart konui so I can test the new timeline glow and auto-scroll behavior",
        "primary": true
      },
      {
        "label": "Adjust glow duration",
        "value": "The glow animation is too long/short, please adjust the duration"
      },
      {
        "label": "Different scroll position",
        "value": "I'd prefer items scroll to a different position (top/bottom third instead of center)"
      }
    ],
    "turnTiming": {
      "totalMs": 176305,
      "ttfeMs": 92,
      "thinkingMs": 176211,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-11T08:40:18.120Z",
  "updatedAt": "2026-01-11T08:40:25.342Z",
  "requestId": "6e1a7556-375b-4bdc-a52a-92c3a1fa45f7",
  "scope": "greatvibe",
  "tags": [
    "kontasks",
    "ui",
    "timeline"
  ],
  "sessionId": "ses_40728090-b86"
}