Test: SortableList Component Demo

Details

Raw Data

{
  "id": "2f0071c9-b1e0-4bc3-88b9-9959f96c8234",
  "type": "general",
  "status": "completed",
  "title": "Test: SortableList Component Demo",
  "description": "Interactive drag-and-drop reorderable list demonstration",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">🧪 SortableList Component Demo</h2>\n<p style=\"color:#9ca3af;margin:0 0 20px 0;\">Try dragging items to reorder them, then click the button to submit the new order.</p>\n\n<div class=\"sortable-list-container\" id=\"priority-list\">\n  <h4 class=\"sortable-title\">Prioritize Backlog Items</h4>\n  <p class=\"sortable-hint\">Drag items to reorder</p>\n  <div class=\"sortable-list\" data-list-id=\"priority-list\">\n    <div class=\"sortable-item\" data-id=\"quick-turn\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">1</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">Quick Turn Mode</span>\n        <span class=\"sortable-desc\">Fast stateless chat for simple questions</span>\n      </div>\n    </div>\n    <div class=\"sortable-item\" data-id=\"file-tree\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">2</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">FileTree Component</span>\n        <span class=\"sortable-desc\">Interactive expand/collapse file browser</span>\n      </div>\n    </div>\n    <div class=\"sortable-item\" data-id=\"tabbed-card\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">3</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">TabbedCard Component</span>\n        <span class=\"sortable-desc\">Switchable content tabs</span>\n      </div>\n    </div>\n    <div class=\"sortable-item\" data-id=\"step-wizard\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">4</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">StepWizard Component</span>\n        <span class=\"sortable-desc\">Multi-step form progression</span>\n      </div>\n    </div>\n    <div class=\"sortable-item\" data-id=\"code-viewer\" draggable=\"true\">\n      <span class=\"sortable-handle\">⋮⋮</span>\n      <span class=\"sortable-number\">5</span>\n      <div class=\"sortable-content\">\n        <span class=\"sortable-label\">CodeViewer with Syntax Highlighting</span>\n        <span class=\"sortable-desc\">Display code with proper colors</span>\n      </div>\n    </div>\n  </div>\n  <button class=\"sortable-submit-btn\" onclick=\"submitSortableOrder_priority_list()\">\n    Apply Priority Order\n  </button>\n</div>\n\n<script>\n  (function() {\n    const listId = 'priority-list';\n    const container = document.querySelector('#' + listId + ' .sortable-list');\n    if (!container) return;\n\n    let draggedItem = null;\n\n    container.querySelectorAll('.sortable-item').forEach(item => {\n      item.addEventListener('dragstart', (e) => {\n        draggedItem = item;\n        item.classList.add('dragging');\n        e.dataTransfer.effectAllowed = 'move';\n      });\n\n      item.addEventListener('dragend', () => {\n        item.classList.remove('dragging');\n        draggedItem = null;\n        updateNumbers();\n      });\n\n      item.addEventListener('dragover', (e) => {\n        e.preventDefault();\n        if (!draggedItem || draggedItem === item) return;\n        const rect = item.getBoundingClientRect();\n        const midY = rect.top + rect.height / 2;\n        if (e.clientY < midY) {\n          container.insertBefore(draggedItem, item);\n        } else {\n          container.insertBefore(draggedItem, item.nextSibling);\n        }\n      });\n    });\n\n    function updateNumbers() {\n      container.querySelectorAll('.sortable-item').forEach((item, idx) => {\n        item.querySelector('.sortable-number').textContent = idx + 1;\n      });\n    }\n\n    window['getSortableOrder_priority_list'] = function() {\n      return Array.from(container.querySelectorAll('.sortable-item'))\n        .map(item => item.getAttribute('data-id'));\n    };\n\n    window['submitSortableOrder_priority_list'] = function() {\n      const order = window['getSortableOrder_priority_list']();\n      const prompt = 'Backlog priority reordered: ' + order.map((id, i) => (i+1) + '. ' + id).join(', ');\n      if (typeof sendPromptToConsole === 'function') {\n        sendPromptToConsole(prompt);\n      } else {\n        window.location.href = '/?prompt=' + encodeURIComponent(prompt);\n      }\n    };\n\n    console.log('[SortableList] Initialized:', listId);\n  })();\n</script>\n\n<style>\n  .sortable-list-container {\n    background: #2d2d2d;\n    padding: 16px;\n    border-radius: 8px;\n    margin: 12px 0;\n  }\n  .sortable-title {\n    color: #fff;\n    margin: 0 0 8px 0;\n    font-size: 1rem;\n  }\n  .sortable-hint {\n    color: #7f848e;\n    font-size: 0.85rem;\n    margin: 0 0 12px 0;\n  }\n  .sortable-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .sortable-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: #3d3d3d;\n    padding: 12px;\n    border-radius: 6px;\n    cursor: grab;\n    transition: background 0.2s, transform 0.2s;\n    user-select: none;\n  }\n  .sortable-item:hover {\n    background: #4d4d4d;\n  }\n  .sortable-item.dragging {\n    opacity: 0.5;\n    background: #5d5d5d;\n    cursor: grabbing;\n  }\n  .sortable-handle {\n    color: #7f848e;\n    font-size: 1.2rem;\n    cursor: grab;\n  }\n  .sortable-number {\n    background: #c99542;\n    color: #000;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: bold;\n    font-size: 0.85rem;\n  }\n  .sortable-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  .sortable-label {\n    color: #e0e0e0;\n    font-weight: 500;\n  }\n  .sortable-desc {\n    color: #7f848e;\n    font-size: 0.85rem;\n  }\n  .sortable-submit-btn {\n    margin-top: 16px;\n    background: linear-gradient(135deg, #c99542 0%, #e3af5b 100%);\n    color: #000;\n    border: none;\n    padding: 12px 24px;\n    border-radius: 6px;\n    font-weight: bold;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n  }\n  .sortable-submit-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(201, 149, 66, 0.4);\n  }\n</style>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:20px;\">\n<h4 style=\"margin:0 0 8px 0;color:#98c379;\">✓ Test Instructions</h4>\n<ol style=\"margin:0;padding-left:20px;line-height:1.8;color:#e0e0e0;\">\n<li>Grab any item by the ⋮⋮ handle or anywhere on the row</li>\n<li>Drag it up or down to reorder</li>\n<li>Watch the numbers update automatically</li>\n<li>Click \"Apply Priority Order\" to submit</li>\n</ol>\n</div>\n</div>",
    "requestedAt": "2026-01-07T05:44:00.000Z",
    "requestId": "1dfbf09d-16c8-40fb-9d21-88a2e9c0cca0",
    "turnTiming": {
      "totalMs": 48115,
      "ttfeMs": 763,
      "thinkingMs": 47352,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 98,
      "toolsPct": 0,
      "ttfePct": 2
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T05:49:07.422Z",
  "updatedAt": "2026-01-07T05:49:11.606Z",
  "requestId": "1dfbf09d-16c8-40fb-9d21-88a2e9c0cca0",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "components",
    "test"
  ],
  "targetUser": "claude"
}