← Back to Kontasks
Diff viewer and rollback UI for kontask detail
Added inline diff viewer with syntax highlighting and rollback confirmation modal
Output
✅ Kontask Detail Page Enhanced
🔍 Inline Diff Viewer
The "View Diff" button now shows the diff inline on the page instead of opening a popup:
- ● One Dark theme syntax highlighting
- + Green for added lines
- - Red for removed lines
- @@ Cyan for hunk headers
- ---/+++ Purple for file paths
- Collapsible panel (click again to hide)
- Cached locally to avoid redundant API calls
- Loading spinner and error handling
↩ Rollback Confirmation Modal
The "Rollback" button now shows a proper confirmation modal:
- Clear warning about what the revert does
- Shows the commit SHA being reverted
- Reassuring message that reverts are safe
- Cancel and Confirm buttons
- Uses POST to
/api/revert-commitproperly - Button disabled during operation to prevent double-clicks
- Success/error feedback
📁 Files Changed
konui/src/views/kontask-detail.ts
+230 / -7 lines
What's Next?
Test by viewing any kontask with a commitSha field.
Quick Actions
Original Request
No layout configured
Details
Type
General
Status
Completed
Scope
vibetools
Tags
kontasksuigit
Created
7 Jan 2026, 1:31 pm
Updated
7 Jan 2026, 1:32 pm
Timing
⏱️ 221.0s
0 tools
● TTFE 2%
● Thinking 98%
● Tools 0%
Created By
claude
🔗 Git Commit
540a87f6
+230 / -7
📁 1 file changed
konui/src/views/kontask-detail.ts
Raw Data
{
"id": "f26b7617-fa90-4776-a314-d10646239c03",
"type": "general",
"status": "completed",
"title": "Diff viewer and rollback UI for kontask detail",
"description": "Added inline diff viewer with syntax highlighting and rollback confirmation modal",
"context": {
"output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n<h2 style=\"margin:0 0 16px 0;color:#fff;\">✅ Kontask Detail Page Enhanced</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"margin:0 0 12px 0;color:#4ade80;\">🔍 Inline Diff Viewer</h3>\n<p style=\"margin:0 0 8px 0;\">The \"View Diff\" button now shows the diff <strong>inline</strong> on the page instead of opening a popup:</p>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;\">\n<li><span style=\"color:#61afef;\">●</span> <strong>One Dark theme</strong> syntax highlighting</li>\n<li><span style=\"color:#98c379;\">+</span> <strong>Green</strong> for added lines</li>\n<li><span style=\"color:#e06c75;\">-</span> <strong>Red</strong> for removed lines</li>\n<li><span style=\"color:#56b6c2;\">@@</span> <strong>Cyan</strong> for hunk headers</li>\n<li><span style=\"color:#c678dd;\">---/+++</span> <strong>Purple</strong> for file paths</li>\n<li>Collapsible panel (click again to hide)</li>\n<li>Cached locally to avoid redundant API calls</li>\n<li>Loading spinner and error handling</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"margin:0 0 12px 0;color:#ef4444;\">↩ Rollback Confirmation Modal</h3>\n<p style=\"margin:0 0 8px 0;\">The \"Rollback\" button now shows a proper <strong>confirmation modal</strong>:</p>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;\">\n<li>Clear warning about what the revert does</li>\n<li>Shows the commit SHA being reverted</li>\n<li>Reassuring message that reverts are safe</li>\n<li>Cancel and Confirm buttons</li>\n<li>Uses POST to <code style=\"background:#374151;padding:2px 6px;border-radius:3px;\">/api/revert-commit</code> properly</li>\n<li>Button disabled during operation to prevent double-clicks</li>\n<li>Success/error feedback</li>\n</ul>\n</div>\n\n<div style=\"background:#1a2e1a;padding:16px;border-radius:6px;border-left:3px solid #22c55e;margin-bottom:16px;\">\n<h4 style=\"margin:0 0 8px 0;color:#4ade80;\">📁 Files Changed</h4>\n<p style=\"margin:0;font-family:monospace;font-size:0.9rem;\"><code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;color:#e5c07b;\">konui/src/views/kontask-detail.ts</code></p>\n<p style=\"margin:8px 0 0 0;font-size:0.85rem;\"><span style=\"color:#98c379;\">+230</span> / <span style=\"color:#ef4444;\">-7</span> lines</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:12px;border-radius:6px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">What's Next?</h4>\n<p style=\"color:#9ca3af;margin:0;\">Test by viewing any kontask with a <code style=\"background:#374151;padding:2px 6px;border-radius:3px;\">commitSha</code> field.</p>\n</div>\n</div>",
"requestedAt": "2026-01-07T12:00:00Z",
"requestId": "2a3b8cc3-b51a-4da5-b8fd-d930f58d7fe7",
"commitSha": "540a87f6",
"filesChanged": [
"konui/src/views/kontask-detail.ts"
],
"linesAdded": 230,
"linesRemoved": 7,
"choices": [
{
"label": "Restart konui",
"value": "Restart konui to apply the changes",
"primary": true
},
{
"label": "View commit",
"value": "Show the git diff for commit 540a87f6"
},
{
"label": "Test it",
"value": "Find a kontask with a commit SHA to test the new diff viewer"
}
],
"turnTiming": {
"totalMs": 221031,
"ttfeMs": 3590,
"thinkingMs": 217436,
"toolExecutionMs": 0,
"toolCallCount": 0,
"thinkingPct": 98,
"toolsPct": 0,
"ttfePct": 2
}
},
"createdBy": "claude",
"createdAt": "2026-01-07T03:31:57.905Z",
"updatedAt": "2026-01-07T03:32:03.788Z",
"requestId": "2a3b8cc3-b51a-4da5-b8fd-d930f58d7fe7",
"scope": "vibetools",
"tags": [
"kontasks",
"ui",
"git"
],
"targetUser": "claude"
}