StepWizard Component Test

Details

Raw Data

{
  "id": "5064135d-84c8-4dec-a210-2253d6cf54cd",
  "type": "general",
  "status": "completed",
  "title": "StepWizard Component Test",
  "description": "Testing the new StepWizard component in dashboard console",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">🧙 StepWizard Component Test</h2>\n<p style=\"color:#9ca3af;margin:0 0 20px 0;\">Testing the multi-step wizard component. Try navigating through the steps!</p>\n\n<div class=\"step-wizard\" id=\"test-wizard\">\n  <h3 class=\"wizard-title\">Project Setup Wizard</h3>\n  <div class=\"wizard-progress\">\n    <div class=\"wizard-progress-step active\" data-step-index=\"0\">\n      <div class=\"progress-circle\"><span class=\"step-number\">1</span></div>\n      <span class=\"step-title\">Choose Template</span>\n    </div>\n    <div class=\"progress-connector\"></div>\n    <div class=\"wizard-progress-step\" data-step-index=\"1\">\n      <div class=\"progress-circle\"><span class=\"step-number\">2</span></div>\n      <span class=\"step-title\">Configure</span>\n    </div>\n    <div class=\"progress-connector\"></div>\n    <div class=\"wizard-progress-step\" data-step-index=\"2\">\n      <div class=\"progress-circle\"><span class=\"step-number\">3</span></div>\n      <span class=\"step-title\">Review</span>\n    </div>\n  </div>\n  <div class=\"wizard-panels\">\n    <div class=\"wizard-step-panel active\" data-step-id=\"step1\" data-step-index=\"0\">\n      <div class=\"step-header\">\n        <span class=\"step-header-icon\">📦</span>\n        <h4 class=\"step-header-title\">Choose Template</h4>\n      </div>\n      <div class=\"step-content\">\n        <p>Select a project template to get started:</p>\n        <ul>\n          <li><strong>Blank</strong> - Start from scratch</li>\n          <li><strong>Dashboard</strong> - Admin panel template</li>\n          <li><strong>API</strong> - REST API boilerplate</li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"wizard-step-panel\" data-step-id=\"step2\" data-step-index=\"1\">\n      <div class=\"step-header\">\n        <span class=\"step-header-icon\">⚙️</span>\n        <h4 class=\"step-header-title\">Configure</h4>\n      </div>\n      <div class=\"step-content\">\n        <p>Configure your project settings:</p>\n        <ul>\n          <li><strong>Name:</strong> my-awesome-project</li>\n          <li><strong>Runtime:</strong> Deno 2.x</li>\n          <li><strong>Database:</strong> SQLite</li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"wizard-step-panel\" data-step-id=\"step3\" data-step-index=\"2\">\n      <div class=\"step-header\">\n        <span class=\"step-header-icon\">✅</span>\n        <h4 class=\"step-header-title\">Review</h4>\n      </div>\n      <div class=\"step-content\">\n        <p>Review your choices before creating the project:</p>\n        <div style=\"background:#3d3d3d;padding:12px;border-radius:6px;margin-top:12px;\">\n          <p style=\"margin:0;\"><strong>Template:</strong> Dashboard</p>\n          <p style=\"margin:8px 0 0 0;\"><strong>Name:</strong> my-awesome-project</p>\n          <p style=\"margin:8px 0 0 0;\"><strong>Runtime:</strong> Deno 2.x</p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"wizard-navigation\">\n    <button class=\"wizard-btn wizard-prev\" onclick=\"wizardPrev_testwizard()\" disabled>← Previous</button>\n    <span class=\"wizard-step-indicator\">Step <span class=\"current-step\">1</span> of 3</span>\n    <button class=\"wizard-btn wizard-next\" onclick=\"wizardNext_testwizard()\">Next →</button>\n    <button class=\"wizard-btn wizard-submit\" onclick=\"wizardSubmit_testwizard()\" style=\"display: none;\">Create Project</button>\n  </div>\n</div>\n<script>\n(function() {\n  const wizardId = 'test-wizard';\n  const wizard = document.getElementById(wizardId);\n  if (!wizard) { console.log('[StepWizard] Wizard not found:', wizardId); return; }\n\n  const totalSteps = 3;\n  let currentStep = 0;\n\n  const progressSteps = wizard.querySelectorAll('.wizard-progress-step');\n  const panels = wizard.querySelectorAll('.wizard-step-panel');\n  const prevBtn = wizard.querySelector('.wizard-prev');\n  const nextBtn = wizard.querySelector('.wizard-next');\n  const submitBtn = wizard.querySelector('.wizard-submit');\n  const stepIndicator = wizard.querySelector('.current-step');\n  const connectors = wizard.querySelectorAll('.progress-connector');\n\n  function updateUI() {\n    progressSteps.forEach((step, idx) => {\n      step.classList.remove('active', 'completed');\n      if (idx < currentStep) {\n        step.classList.add('completed');\n      } else if (idx === currentStep) {\n        step.classList.add('active');\n      }\n    });\n\n    connectors.forEach((conn, idx) => {\n      conn.classList.toggle('completed', idx < currentStep);\n    });\n\n    panels.forEach((panel, idx) => {\n      panel.classList.toggle('active', idx === currentStep);\n    });\n\n    prevBtn.disabled = currentStep === 0;\n    stepIndicator.textContent = currentStep + 1;\n\n    if (currentStep === totalSteps - 1) {\n      nextBtn.style.display = 'none';\n      submitBtn.style.display = 'inline-block';\n    } else {\n      nextBtn.style.display = 'inline-block';\n      submitBtn.style.display = 'none';\n    }\n  }\n\n  window.wizardPrev_testwizard = function() {\n    if (currentStep > 0) {\n      currentStep--;\n      updateUI();\n    }\n  };\n\n  window.wizardNext_testwizard = function() {\n    if (currentStep < totalSteps - 1) {\n      currentStep++;\n      updateUI();\n    }\n  };\n\n  window.wizardGoTo_testwizard = function(stepIndex) {\n    if (stepIndex >= 0 && stepIndex < totalSteps) {\n      currentStep = stepIndex;\n      updateUI();\n    }\n  };\n\n  window.wizardSubmit_testwizard = function() {\n    alert('Wizard completed! Project \"my-awesome-project\" created.');\n  };\n\n  progressSteps.forEach((step, idx) => {\n    step.addEventListener('click', () => {\n      if (idx <= currentStep) {\n        currentStep = idx;\n        updateUI();\n      }\n    });\n  });\n\n  console.log('[StepWizard] Initialized:', wizardId, '(' + totalSteps + ' steps)');\n})();\n</script>\n<style>\n.step-wizard {\n  background: #2d2d2d;\n  border-radius: 8px;\n  padding: 20px;\n  margin: 12px 0;\n}\n.wizard-title {\n  color: #fff;\n  margin: 0 0 20px 0;\n  font-size: 1.1rem;\n  text-align: center;\n}\n.wizard-progress {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n  padding: 0 20px;\n}\n.wizard-progress-step {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: opacity 0.2s;\n}\n.wizard-progress-step.active,\n.wizard-progress-step.completed {\n  opacity: 1;\n}\n.progress-circle {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: #3d3d3d;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid #555;\n  transition: all 0.2s;\n}\n.wizard-progress-step.active .progress-circle {\n  background: #c99542;\n  border-color: #c99542;\n}\n.wizard-progress-step.completed .progress-circle {\n  background: #22c55e;\n  border-color: #22c55e;\n}\n.wizard-progress-step.completed .progress-circle::after {\n  content: '✓';\n  color: #fff;\n  font-weight: bold;\n}\n.wizard-progress-step.completed .step-number {\n  display: none;\n}\n.step-number {\n  color: #9ca3af;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n.wizard-progress-step.active .step-number {\n  color: #000;\n}\n.step-title {\n  color: #9ca3af;\n  font-size: 0.75rem;\n  text-align: center;\n  max-width: 80px;\n}\n.wizard-progress-step.active .step-title {\n  color: #c99542;\n  font-weight: 500;\n}\n.wizard-progress-step.completed .step-title {\n  color: #22c55e;\n}\n.progress-connector {\n  width: 40px;\n  height: 2px;\n  background: #555;\n  margin: 0 8px 24px 8px;\n  transition: background 0.2s;\n}\n.progress-connector.completed {\n  background: #22c55e;\n}\n.wizard-panels {\n  min-height: 150px;\n}\n.wizard-step-panel {\n  display: none;\n}\n.wizard-step-panel.active {\n  display: block;\n  animation: fadeIn 0.3s ease;\n}\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateX(10px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.step-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid #3d3d3d;\n}\n.step-header-icon {\n  font-size: 1.5rem;\n}\n.step-header-title {\n  color: #fff;\n  margin: 0;\n  font-size: 1rem;\n}\n.step-content {\n  color: #e0e0e0;\n  line-height: 1.6;\n}\n.step-content p {\n  margin: 0 0 12px 0;\n}\n.step-content ul {\n  margin: 0 0 12px 0;\n  padding-left: 20px;\n}\n.wizard-navigation {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #3d3d3d;\n}\n.wizard-btn {\n  padding: 10px 20px;\n  border: none;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.wizard-prev {\n  background: #3d3d3d;\n  color: #e0e0e0;\n}\n.wizard-prev:hover:not(:disabled) {\n  background: #4d4d4d;\n}\n.wizard-prev:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n.wizard-next {\n  background: linear-gradient(135deg, #c99542 0%, #e3af5b 100%);\n  color: #000;\n}\n.wizard-next:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(201, 149, 66, 0.3);\n}\n.wizard-submit {\n  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);\n  color: #fff;\n}\n.wizard-submit:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);\n}\n.wizard-step-indicator {\n  color: #7f848e;\n  font-size: 0.85rem;\n}\n.wizard-step-indicator .current-step {\n  color: #c99542;\n  font-weight: bold;\n}\n</style>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">Test Instructions:</h4>\n<ol style=\"color:#9ca3af;margin:0;padding-left:20px;line-height:1.8;\">\n<li>Click <strong>Next →</strong> to advance through steps</li>\n<li>Click <strong>← Previous</strong> to go back</li>\n<li>Click on completed step circles to jump back</li>\n<li>On step 3, click <strong>Create Project</strong> to submit</li>\n</ol>\n</div>\n</div>",
    "choices": [
      {
        "label": "Works!",
        "value": "StepWizard test passed - continue to Step 6 (FileTree component)",
        "primary": true
      },
      {
        "label": "Bug Found",
        "value": "StepWizard has a bug - let me describe what went wrong"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T06:21:04.335Z",
  "updatedAt": "2026-01-07T06:21:04.562Z",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "components",
    "testing"
  ],
  "targetUser": "claude"
}