feat: Enhance issue and solution management with new UI components and functionality

- Added internationalization support for new issue and solution-related strings in i18n.js.
- Implemented a solution detail modal in issue-manager.js to display solution information and bind/unbind actions.
- Enhanced the skill loading function to combine project and user skills in hook-manager.js.
- Improved queue rendering logic to handle empty states and display queue statistics in issue-manager.js.
- Introduced command modals for queue operations, allowing users to generate execution queues via CLI commands.
- Added functionality to auto-generate issue IDs and regenerate them in the create issue modal.
- Implemented detailed rendering of solution tasks, including acceptance criteria and modification points.

ccw/src/templates/dashboard-js/i18n.js

@@ -1772,6 +1772,45 @@ const i18n = {
     'issues.created': 'Issue created successfully',
     'issues.confirmDelete': 'Are you sure you want to delete this issue?',
     'issues.deleted': 'Issue deleted',
+    'issues.idAutoGenerated': 'Auto-generated',
+    'issues.regenerateId': 'Regenerate ID',
+    // Solution detail
+    'issues.solutionDetail': 'Solution Details',
+    'issues.bind': 'Bind',
+    'issues.unbind': 'Unbind',
+    'issues.bound': 'Bound',
+    'issues.totalTasks': 'Total Tasks',
+    'issues.bindStatus': 'Bind Status',
+    'issues.createdAt': 'Created',
+    'issues.taskList': 'Task List',
+    'issues.noTasks': 'No tasks in this solution',
+    'issues.noSolutions': 'No solutions',
+    'issues.viewJson': 'View Raw JSON',
+    'issues.scope': 'Scope',
+    'issues.modificationPoints': 'Modification Points',
+    'issues.implementationSteps': 'Implementation Steps',
+    'issues.acceptanceCriteria': 'Acceptance Criteria',
+    'issues.dependencies': 'Dependencies',
+    'issues.solutionBound': 'Solution bound successfully',
+    'issues.solutionUnbound': 'Solution unbound',
+    // Queue operations
+    'issues.queueEmptyHint': 'Generate execution queue from bound solutions',
+    'issues.createQueue': 'Create Queue',
+    'issues.regenerate': 'Regenerate',
+    'issues.regenerateQueue': 'Regenerate Queue',
+    'issues.refreshQueue': 'Refresh',
+    'issues.executionGroups': 'groups',
+    'issues.totalItems': 'items',
+    'issues.queueRefreshed': 'Queue refreshed',
+    'issues.confirmCreateQueue': 'This will execute /issue:queue command via Claude Code CLI to generate execution queue from bound solutions.\n\nContinue?',
+    'issues.creatingQueue': 'Creating execution queue...',
+    'issues.queueExecutionStarted': 'Queue generation started',
+    'issues.queueCreated': 'Queue created successfully',
+    'issues.queueCreationFailed': 'Queue creation failed',
+    'issues.queueCommandHint': 'Run one of the following commands in your terminal to generate the execution queue from bound solutions:',
+    'issues.queueCommandInfo': 'After running the command, click "Refresh" to see the updated queue.',
+    'issues.alternative': 'Alternative',
+    'issues.refreshAfter': 'Refresh Queue',
     // issue.* keys (legacy)
     'issue.viewIssues': 'Issues',
     'issue.viewQueue': 'Queue',
@@ -3595,6 +3634,45 @@ const i18n = {
     'issues.created': '议题创建成功',
     'issues.confirmDelete': '确定要删除此议题吗？',
     'issues.deleted': '议题已删除',
+    'issues.idAutoGenerated': '自动生成',
+    'issues.regenerateId': '重新生成ID',
+    // Solution detail
+    'issues.solutionDetail': '解决方案详情',
+    'issues.bind': '绑定',
+    'issues.unbind': '解绑',
+    'issues.bound': '已绑定',
+    'issues.totalTasks': '任务总数',
+    'issues.bindStatus': '绑定状态',
+    'issues.createdAt': '创建时间',
+    'issues.taskList': '任务列表',
+    'issues.noTasks': '此解决方案无任务',
+    'issues.noSolutions': '暂无解决方案',
+    'issues.viewJson': '查看原始JSON',
+    'issues.scope': '作用域',
+    'issues.modificationPoints': '修改点',
+    'issues.implementationSteps': '实现步骤',
+    'issues.acceptanceCriteria': '验收标准',
+    'issues.dependencies': '依赖项',
+    'issues.solutionBound': '解决方案已绑定',
+    'issues.solutionUnbound': '解决方案已解绑',
+    // Queue operations
+    'issues.queueEmptyHint': '从绑定的解决方案生成执行队列',
+    'issues.createQueue': '创建队列',
+    'issues.regenerate': '重新生成',
+    'issues.regenerateQueue': '重新生成队列',
+    'issues.refreshQueue': '刷新',
+    'issues.executionGroups': '个执行组',
+    'issues.totalItems': '个任务',
+    'issues.queueRefreshed': '队列已刷新',
+    'issues.confirmCreateQueue': '这将通过 Claude Code CLI 执行 /issue:queue 命令，从绑定的解决方案生成执行队列。\n\n是否继续？',
+    'issues.creatingQueue': '正在创建执行队列...',
+    'issues.queueExecutionStarted': '队列生成已启动',
+    'issues.queueCreated': '队列创建成功',
+    'issues.queueCreationFailed': '队列创建失败',
+    'issues.queueCommandHint': '在终端中运行以下命令之一，从绑定的解决方案生成执行队列：',
+    'issues.queueCommandInfo': '运行命令后，点击"刷新"查看更新后的队列。',
+    'issues.alternative': '或者',
+    'issues.refreshAfter': '刷新队列',
     // issue.* keys (legacy)
     'issue.viewIssues': '议题',
     'issue.viewQueue': '队列',

ccw/src/templates/dashboard-js/views/hook-manager.js

@@ -168,16 +168,22 @@ async function loadAvailableSkills() {
     if (!response.ok) throw new Error('Failed to load skills');
     const data = await response.json();
 
+    // Combine project and user skills (API returns { projectSkills: [], userSkills: [] })
+    const allSkills = [
+      ...(data.projectSkills || []).map(s => ({ ...s, scope: 'project' })),
+      ...(data.userSkills || []).map(s => ({ ...s, scope: 'user' }))
+    ];
+
     const container = document.getElementById('skill-discovery-skill-context');
-    if (container && data.skills) {
-      if (data.skills.length === 0) {
+    if (container) {
+      if (allSkills.length === 0) {
         container.innerHTML = `
           <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.availableSkills')}</span>
           <span class="text-muted-foreground ml-2">${t('hook.wizard.noSkillsFound').split('.')[0]}</span>
         `;
       } else {
-        const skillBadges = data.skills.map(skill => `
-          <span class="px-2 py-0.5 bg-emerald-500/10 text-emerald-500 rounded" title="${escapeHtml(skill.description)}">${escapeHtml(skill.name)}</span>
+        const skillBadges = allSkills.map(skill => `
+          <span class="px-2 py-0.5 bg-emerald-500/10 text-emerald-500 rounded" title="${escapeHtml(skill.description || '')}">${escapeHtml(skill.name)}</span>
         `).join('');
         container.innerHTML = `
           <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.availableSkills')}</span>
@@ -187,7 +193,7 @@ async function loadAvailableSkills() {
     }
 
     // Store skills for wizard use
-    window.availableSkills = data.skills || [];
+    window.availableSkills = allSkills;
   } catch (err) {
     console.error('Failed to load skills:', err);
     const container = document.getElementById('skill-discovery-skill-context');

ccw/src/templates/dashboard-js/views/issue-manager.js

@@ -9,6 +9,7 @@ var issueData = {
   queue: { queue: [], conflicts: [], execution_groups: [], grouped_items: {} },
   selectedIssue: null,
   selectedSolution: null,
+  selectedSolutionIssueId: null,
   statusFilter: 'all',
   searchQuery: '',
   viewMode: 'issues' // 'issues' | 'queue'
@@ -148,6 +149,31 @@ function renderIssueView() {
       <!-- Detail Panel -->
       <div id="issueDetailPanel" class="issue-detail-panel hidden"></div>
 
+      <!-- Solution Detail Modal -->
+      <div id="solutionDetailModal" class="solution-modal hidden">
+        <div class="solution-modal-backdrop" onclick="closeSolutionDetail()"></div>
+        <div class="solution-modal-content">
+          <div class="solution-modal-header">
+            <div class="solution-modal-title">
+              <span id="solutionDetailId" class="font-mono text-sm text-muted-foreground"></span>
+              <h3 id="solutionDetailTitle">${t('issues.solutionDetail') || 'Solution Details'}</h3>
+            </div>
+            <div class="solution-modal-actions">
+              <button id="solutionBindBtn" class="btn-secondary" onclick="toggleSolutionBind()">
+                <i data-lucide="link" class="w-4 h-4"></i>
+                <span>${t('issues.bind') || 'Bind'}</span>
+              </button>
+              <button class="btn-icon" onclick="closeSolutionDetail()">
+                <i data-lucide="x" class="w-5 h-5"></i>
+              </button>
+            </div>
+          </div>
+          <div class="solution-modal-body" id="solutionDetailBody">
+            <!-- Content will be rendered dynamically -->
+          </div>
+        </div>
+      </div>
+
       <!-- Create Issue Modal -->
       <div id="createIssueModal" class="issue-modal hidden">
         <div class="issue-modal-backdrop" onclick="hideCreateIssueModal()"></div>
@@ -161,7 +187,12 @@ function renderIssueView() {
           <div class="issue-modal-body">
             <div class="form-group">
               <label>${t('issues.issueId') || 'Issue ID'}</label>
-              <input type="text" id="newIssueId" placeholder="e.g., GH-123 or TASK-001" />
+              <div class="input-with-action">
+                <input type="text" id="newIssueId" placeholder="${t('issues.idAutoGenerated') || 'Auto-generated'}" />
+                <button type="button" class="btn-icon" onclick="regenerateIssueId()" title="${t('issues.regenerateId') || 'Regenerate ID'}">
+                  <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+                </button>
+              </div>
             </div>
             <div class="form-group">
               <label>${t('issues.issueTitle') || 'Title'}</label>
@@ -329,20 +360,129 @@ function filterIssuesByStatus(status) {
 // ========== Queue Section ==========
 function renderQueueSection() {
   const queue = issueData.queue;
-  const groups = queue.execution_groups || [];
-  const groupedItems = queue.grouped_items || {};
+  const queueItems = queue.queue || [];
+  const metadata = queue._metadata || {};
 
-  if (groups.length === 0 && (!queue.queue || queue.queue.length === 0)) {
+  // Check if queue is empty
+  if (queueItems.length === 0) {
     return `
-      <div class="queue-empty">
-        <i data-lucide="git-branch" class="w-12 h-12 text-muted-foreground mb-4"></i>
-        <p class="text-muted-foreground">${t('issues.queueEmpty') || 'Queue is empty'}</p>
-        <p class="text-sm text-muted-foreground mt-2">Run /issue:queue to form execution queue</p>
+      <div class="queue-empty-container">
+        <div class="queue-empty">
+          <i data-lucide="git-branch" class="w-16 h-16"></i>
+          <p class="queue-empty-title">${t('issues.queueEmpty') || 'Queue is empty'}</p>
+          <p class="queue-empty-hint">${t('issues.queueEmptyHint') || 'Generate execution queue from bound solutions'}</p>
+          <button class="queue-create-btn" onclick="createExecutionQueue()">
+            <i data-lucide="play" class="w-4 h-4"></i>
+            <span>${t('issues.createQueue') || 'Create Queue'}</span>
+          </button>
+        </div>
       </div>
     `;
   }
 
+  // Group items by execution_group or treat all as single group
+  const groups = queue.execution_groups || [];
+  let groupedItems = queue.grouped_items || {};
+
+  // If no execution_groups, create a default grouping from queue items
+  if (groups.length === 0 && queueItems.length > 0) {
+    const groupMap = {};
+    queueItems.forEach(item => {
+      const groupId = item.execution_group || 'default';
+      if (!groupMap[groupId]) {
+        groupMap[groupId] = [];
+      }
+      groupMap[groupId].push(item);
+    });
+
+    // Create synthetic groups
+    const syntheticGroups = Object.keys(groupMap).map(groupId => ({
+      id: groupId,
+      type: 'sequential',
+      task_count: groupMap[groupId].length
+    }));
+
+    return `
+      <!-- Queue Header -->
+      <div class="queue-toolbar mb-4">
+        <div class="queue-stats">
+          <div class="queue-info-card">
+            <span class="queue-info-label">${t('issues.queueId') || 'Queue ID'}</span>
+            <span class="queue-info-value font-mono text-sm">${queue.id || 'N/A'}</span>
+          </div>
+          <div class="queue-info-card">
+            <span class="queue-info-label">${t('issues.status') || 'Status'}</span>
+            <span class="queue-status-badge ${queue.status || ''}">${queue.status || 'unknown'}</span>
+          </div>
+          <div class="queue-info-card">
+            <span class="queue-info-label">${t('issues.issues') || 'Issues'}</span>
+            <span class="queue-info-value">${(queue.issue_ids || []).join(', ') || 'N/A'}</span>
+          </div>
+        </div>
+        <div class="queue-actions">
+          <button class="btn-secondary" onclick="refreshQueue()" title="${t('issues.refreshQueue') || 'Refresh'}">
+            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+          </button>
+          <button class="btn-secondary" onclick="createExecutionQueue()" title="${t('issues.regenerateQueue') || 'Regenerate Queue'}">
+            <i data-lucide="rotate-cw" class="w-4 h-4"></i>
+            <span>${t('issues.regenerate') || 'Regenerate'}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Queue Stats -->
+      <div class="queue-stats-grid mb-4">
+        <div class="queue-stat-card">
+          <span class="queue-stat-value">${metadata.total_tasks || queueItems.length}</span>
+          <span class="queue-stat-label">${t('issues.totalTasks') || 'Total'}</span>
+        </div>
+        <div class="queue-stat-card pending">
+          <span class="queue-stat-value">${metadata.pending_count || queueItems.filter(i => i.status === 'pending').length}</span>
+          <span class="queue-stat-label">${t('issues.pending') || 'Pending'}</span>
+        </div>
+        <div class="queue-stat-card executing">
+          <span class="queue-stat-value">${metadata.executing_count || queueItems.filter(i => i.status === 'executing').length}</span>
+          <span class="queue-stat-label">${t('issues.executing') || 'Executing'}</span>
+        </div>
+        <div class="queue-stat-card completed">
+          <span class="queue-stat-value">${metadata.completed_count || queueItems.filter(i => i.status === 'completed').length}</span>
+          <span class="queue-stat-label">${t('issues.completed') || 'Completed'}</span>
+        </div>
+        <div class="queue-stat-card failed">
+          <span class="queue-stat-value">${metadata.failed_count || queueItems.filter(i => i.status === 'failed').length}</span>
+          <span class="queue-stat-label">${t('issues.failed') || 'Failed'}</span>
+        </div>
+      </div>
+
+      <!-- Queue Items -->
+      <div class="queue-timeline">
+        ${syntheticGroups.map(group => renderQueueGroup(group, groupMap[group.id] || [])).join('')}
+      </div>
+
+      ${queue.conflicts && queue.conflicts.length > 0 ? renderConflictsSection(queue.conflicts) : ''}
+    `;
+  }
+
   return `
+    <!-- Queue Toolbar -->
+    <div class="queue-toolbar mb-4">
+      <div class="queue-stats">
+        <span class="text-sm text-muted-foreground">
+          ${groups.length} ${t('issues.executionGroups') || 'groups'} ·
+          ${queueItems.length} ${t('issues.totalItems') || 'items'}
+        </span>
+      </div>
+      <div class="queue-actions">
+        <button class="btn-secondary" onclick="refreshQueue()" title="${t('issues.refreshQueue') || 'Refresh'}">
+          <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+        </button>
+        <button class="btn-secondary" onclick="createExecutionQueue()" title="${t('issues.regenerateQueue') || 'Regenerate Queue'}">
+          <i data-lucide="rotate-cw" class="w-4 h-4"></i>
+          <span>${t('issues.regenerate') || 'Regenerate'}</span>
+        </button>
+      </div>
+    </div>
+
     <div class="queue-info mb-4">
       <p class="text-sm text-muted-foreground">
         <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
@@ -605,24 +745,16 @@ function renderIssueDetailPanel(issue) {
       <div class="detail-section">
         <label class="detail-label">${t('issues.solutions') || 'Solutions'} (${issue.solutions?.length || 0})</label>
         <div class="solutions-list">
-          ${(issue.solutions || []).map(sol => `
-            <div class="solution-item ${sol.is_bound ? 'bound' : ''}" onclick="toggleSolutionExpand('${sol.id}')">
+          ${(issue.solutions || []).length > 0 ? (issue.solutions || []).map(sol => `
+            <div class="solution-item ${sol.is_bound ? 'bound' : ''}" onclick="openSolutionDetail('${issue.id}', '${sol.id}')">
               <div class="solution-header">
                 <span class="solution-id font-mono text-xs">${sol.id}</span>
-                ${sol.is_bound ? '<span class="solution-bound-badge">Bound</span>' : ''}
-                <span class="solution-tasks text-xs">${sol.tasks?.length || 0} tasks</span>
-              </div>
-              <div class="solution-tasks-list hidden" id="solution-${sol.id}">
-                ${(sol.tasks || []).map(task => `
-                  <div class="task-item">
-                    <span class="task-id font-mono">${task.id}</span>
-                    <span class="task-action ${task.action?.toLowerCase() || ''}">${task.action || 'Unknown'}</span>
-                    <span class="task-title">${task.title || ''}</span>
-                  </div>
-                `).join('')}
+                ${sol.is_bound ? '<span class="solution-bound-badge">' + (t('issues.bound') || 'Bound') + '</span>' : ''}
+                <span class="solution-tasks text-xs">${sol.tasks?.length || 0} ${t('issues.tasks') || 'tasks'}</span>
+                <i data-lucide="chevron-right" class="w-4 h-4 ml-auto text-muted-foreground"></i>
               </div>
             </div>
-          `).join('') || '<p class="text-sm text-muted-foreground">No solutions</p>'}
+          `).join('') : '<p class="text-sm text-muted-foreground">' + (t('issues.noSolutions') || 'No solutions') + '</p>'}
         </div>
       </div>
 
@@ -630,7 +762,7 @@ function renderIssueDetailPanel(issue) {
       <div class="detail-section">
         <label class="detail-label">${t('issues.tasks') || 'Tasks'} (${issue.tasks?.length || 0})</label>
         <div class="tasks-list">
-          ${(issue.tasks || []).map(task => `
+          ${(issue.tasks || []).length > 0 ? (issue.tasks || []).map(task => `
             <div class="task-item-detail">
               <div class="flex items-center justify-between">
                 <span class="font-mono text-sm">${task.id}</span>
@@ -642,7 +774,7 @@ function renderIssueDetailPanel(issue) {
               </div>
               <p class="task-title-detail">${task.title || task.description || ''}</p>
             </div>
-          `).join('') || '<p class="text-sm text-muted-foreground">No tasks</p>'}
+          `).join('') : '<p class="text-sm text-muted-foreground">' + (t('issues.noTasks') || 'No tasks') + '</p>'}
         </div>
       </div>
     </div>
@@ -666,6 +798,353 @@ function toggleSolutionExpand(solId) {
   }
 }
 
+// ========== Solution Detail Modal ==========
+function openSolutionDetail(issueId, solutionId) {
+  const issue = issueData.selectedIssue || issueData.issues.find(i => i.id === issueId);
+  if (!issue) return;
+
+  const solution = issue.solutions?.find(s => s.id === solutionId);
+  if (!solution) return;
+
+  issueData.selectedSolution = solution;
+  issueData.selectedSolutionIssueId = issueId;
+
+  const modal = document.getElementById('solutionDetailModal');
+  if (modal) {
+    modal.classList.remove('hidden');
+    renderSolutionDetail(solution);
+    lucide.createIcons();
+  }
+}
+
+function closeSolutionDetail() {
+  const modal = document.getElementById('solutionDetailModal');
+  if (modal) {
+    modal.classList.add('hidden');
+  }
+  issueData.selectedSolution = null;
+  issueData.selectedSolutionIssueId = null;
+}
+
+function renderSolutionDetail(solution) {
+  const idEl = document.getElementById('solutionDetailId');
+  const bodyEl = document.getElementById('solutionDetailBody');
+  const bindBtn = document.getElementById('solutionBindBtn');
+
+  if (idEl) {
+    idEl.textContent = solution.id;
+  }
+
+  // Update bind button state
+  if (bindBtn) {
+    if (solution.is_bound) {
+      bindBtn.innerHTML = `<i data-lucide="unlink" class="w-4 h-4"></i><span>${t('issues.unbind') || 'Unbind'}</span>`;
+      bindBtn.classList.remove('btn-secondary');
+      bindBtn.classList.add('btn-primary');
+    } else {
+      bindBtn.innerHTML = `<i data-lucide="link" class="w-4 h-4"></i><span>${t('issues.bind') || 'Bind'}</span>`;
+      bindBtn.classList.remove('btn-primary');
+      bindBtn.classList.add('btn-secondary');
+    }
+  }
+
+  if (!bodyEl) return;
+
+  const tasks = solution.tasks || [];
+
+  bodyEl.innerHTML = `
+    <!-- Solution Overview -->
+    <div class="solution-detail-section">
+      <div class="solution-overview">
+        <div class="solution-stat">
+          <span class="solution-stat-value">${tasks.length}</span>
+          <span class="solution-stat-label">${t('issues.totalTasks') || 'Total Tasks'}</span>
+        </div>
+        <div class="solution-stat">
+          <span class="solution-stat-value">${solution.is_bound ? '✓' : '—'}</span>
+          <span class="solution-stat-label">${t('issues.bindStatus') || 'Bind Status'}</span>
+        </div>
+        <div class="solution-stat">
+          <span class="solution-stat-value">${solution.created_at ? new Date(solution.created_at).toLocaleDateString() : '—'}</span>
+          <span class="solution-stat-label">${t('issues.createdAt') || 'Created'}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tasks List -->
+    <div class="solution-detail-section">
+      <h4 class="solution-detail-section-title">
+        <i data-lucide="list-checks" class="w-4 h-4"></i>
+        ${t('issues.taskList') || 'Task List'}
+      </h4>
+      <div class="solution-tasks-detail">
+        ${tasks.length === 0 ? `
+          <p class="text-sm text-muted-foreground text-center py-4">${t('issues.noTasks') || 'No tasks in this solution'}</p>
+        ` : tasks.map((task, index) => renderSolutionTask(task, index)).join('')}
+      </div>
+    </div>
+
+    <!-- Raw JSON (collapsible) -->
+    <div class="solution-detail-section">
+      <button class="solution-json-toggle" onclick="toggleSolutionJson()">
+        <i data-lucide="code" class="w-4 h-4"></i>
+        <span>${t('issues.viewJson') || 'View Raw JSON'}</span>
+        <i data-lucide="chevron-down" class="w-4 h-4 ml-auto"></i>
+      </button>
+      <div id="solutionJsonContent" class="solution-json-content hidden">
+        <pre class="solution-json-pre">${escapeHtml(JSON.stringify(solution, null, 2))}</pre>
+      </div>
+    </div>
+  `;
+
+  lucide.createIcons();
+}
+
+function renderSolutionTask(task, index) {
+  const actionClass = (task.action || 'unknown').toLowerCase();
+  const modPoints = task.modification_points || [];
+  // Support both old and new field names
+  const implSteps = task.implementation || task.implementation_steps || [];
+  const acceptance = task.acceptance || task.acceptance_criteria || [];
+  const testInfo = task.test || {};
+  const regression = task.regression || [];
+  const commitInfo = task.commit || {};
+  const dependsOn = task.depends_on || task.dependencies || [];
+
+  // Handle acceptance as object or array
+  const acceptanceCriteria = Array.isArray(acceptance) ? acceptance : (acceptance.criteria || []);
+  const acceptanceVerification = acceptance.verification || [];
+
+  return `
+    <div class="solution-task-card">
+      <div class="solution-task-header" onclick="toggleTaskExpand(${index})">
+        <div class="solution-task-info">
+          <span class="solution-task-index">#${index + 1}</span>
+          <span class="solution-task-id font-mono">${task.id || ''}</span>
+          <span class="task-action-badge ${actionClass}">${task.action || 'Unknown'}</span>
+        </div>
+        <i data-lucide="chevron-down" class="w-4 h-4 task-expand-icon" id="taskExpandIcon${index}"></i>
+      </div>
+      <div class="solution-task-title">${task.title || task.description || 'No title'}</div>
+
+      <div class="solution-task-details hidden" id="taskDetails${index}">
+        ${task.scope ? `
+          <div class="solution-task-scope">
+            <span class="solution-task-scope-label">${t('issues.scope') || 'Scope'}:</span>
+            <span class="font-mono text-sm">${task.scope}</span>
+          </div>
+        ` : ''}
+
+        <!-- Phase 1: Implementation -->
+        ${implSteps.length > 0 ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="code" class="w-3.5 h-3.5"></i>
+              <span class="phase-badge phase-1">1</span>
+              ${t('issues.implementation') || 'Implementation'}
+            </h5>
+            <ol class="solution-impl-list">
+              ${implSteps.map(step => `<li>${typeof step === 'string' ? step : step.description || JSON.stringify(step)}</li>`).join('')}
+            </ol>
+          </div>
+        ` : ''}
+
+        ${modPoints.length > 0 ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="file-edit" class="w-3.5 h-3.5"></i>
+              ${t('issues.modificationPoints') || 'Modification Points'}
+            </h5>
+            <ul class="solution-task-list">
+              ${modPoints.map(mp => `
+                <li class="solution-mod-point">
+                  <span class="mod-point-file font-mono">${mp.file || mp}</span>
+                  ${mp.target ? `<span class="mod-point-target">→ ${mp.target}</span>` : ''}
+                  ${mp.change ? `<span class="mod-point-change">${mp.change}</span>` : ''}
+                </li>
+              `).join('')}
+            </ul>
+          </div>
+        ` : ''}
+
+        <!-- Phase 2: Test -->
+        ${(testInfo.unit?.length > 0 || testInfo.commands?.length > 0) ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="flask-conical" class="w-3.5 h-3.5"></i>
+              <span class="phase-badge phase-2">2</span>
+              ${t('issues.test') || 'Test'}
+              ${testInfo.coverage_target ? `<span class="coverage-target">(${testInfo.coverage_target}% coverage)</span>` : ''}
+            </h5>
+            ${testInfo.unit?.length > 0 ? `
+              <div class="test-subsection">
+                <span class="test-label">${t('issues.unitTests') || 'Unit Tests'}:</span>
+                <ul class="test-list">
+                  ${testInfo.unit.map(t => `<li>${t}</li>`).join('')}
+                </ul>
+              </div>
+            ` : ''}
+            ${testInfo.integration?.length > 0 ? `
+              <div class="test-subsection">
+                <span class="test-label">${t('issues.integrationTests') || 'Integration'}:</span>
+                <ul class="test-list">
+                  ${testInfo.integration.map(t => `<li>${t}</li>`).join('')}
+                </ul>
+              </div>
+            ` : ''}
+            ${testInfo.commands?.length > 0 ? `
+              <div class="test-subsection">
+                <span class="test-label">${t('issues.commands') || 'Commands'}:</span>
+                <div class="test-commands">
+                  ${testInfo.commands.map(cmd => `<code class="test-command">${cmd}</code>`).join('')}
+                </div>
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+
+        <!-- Phase 3: Regression -->
+        ${regression.length > 0 ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
+              <span class="phase-badge phase-3">3</span>
+              ${t('issues.regression') || 'Regression'}
+            </h5>
+            <div class="test-commands">
+              ${regression.map(cmd => `<code class="test-command">${cmd}</code>`).join('')}
+            </div>
+          </div>
+        ` : ''}
+
+        <!-- Phase 4: Acceptance -->
+        ${acceptanceCriteria.length > 0 ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
+              <span class="phase-badge phase-4">4</span>
+              ${t('issues.acceptance') || 'Acceptance'}
+            </h5>
+            <div class="acceptance-subsection">
+              <span class="acceptance-label">${t('issues.criteria') || 'Criteria'}:</span>
+              <ul class="solution-acceptance-list">
+                ${acceptanceCriteria.map(ac => `<li>${typeof ac === 'string' ? ac : ac.description || JSON.stringify(ac)}</li>`).join('')}
+              </ul>
+            </div>
+            ${acceptanceVerification.length > 0 ? `
+              <div class="acceptance-subsection">
+                <span class="acceptance-label">${t('issues.verification') || 'Verification'}:</span>
+                <div class="verification-commands">
+                  ${acceptanceVerification.map(v => `<code class="verification-command">${v}</code>`).join('')}
+                </div>
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+
+        <!-- Phase 5: Commit -->
+        ${commitInfo.type ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="git-commit" class="w-3.5 h-3.5"></i>
+              <span class="phase-badge phase-5">5</span>
+              ${t('issues.commit') || 'Commit'}
+            </h5>
+            <div class="commit-info">
+              <div class="commit-type">
+                <span class="commit-type-badge ${commitInfo.type}">${commitInfo.type}</span>
+                <span class="commit-scope">(${commitInfo.scope || 'core'})</span>
+                ${commitInfo.breaking ? '<span class="commit-breaking">BREAKING</span>' : ''}
+              </div>
+              ${commitInfo.message_template ? `
+                <pre class="commit-message">${commitInfo.message_template}</pre>
+              ` : ''}
+            </div>
+          </div>
+        ` : ''}
+
+        <!-- Dependencies -->
+        ${dependsOn.length > 0 ? `
+          <div class="solution-task-section">
+            <h5 class="solution-task-subtitle">
+              <i data-lucide="git-branch" class="w-3.5 h-3.5"></i>
+              ${t('issues.dependencies') || 'Dependencies'}
+            </h5>
+            <div class="solution-deps-list">
+              ${dependsOn.map(dep => `<span class="solution-dep-tag font-mono">${dep}</span>`).join('')}
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+}
+
+function toggleTaskExpand(index) {
+  const details = document.getElementById('taskDetails' + index);
+  const icon = document.getElementById('taskExpandIcon' + index);
+  if (details) {
+    details.classList.toggle('hidden');
+  }
+  if (icon) {
+    icon.style.transform = details?.classList.contains('hidden') ? '' : 'rotate(180deg)';
+  }
+}
+
+function toggleSolutionJson() {
+  const content = document.getElementById('solutionJsonContent');
+  if (content) {
+    content.classList.toggle('hidden');
+  }
+}
+
+async function toggleSolutionBind() {
+  const solution = issueData.selectedSolution;
+  const issueId = issueData.selectedSolutionIssueId;
+  if (!solution || !issueId) return;
+
+  const action = solution.is_bound ? 'unbind' : 'bind';
+
+  try {
+    const response = await fetch('/api/issues/' + encodeURIComponent(issueId) + '?path=' + encodeURIComponent(projectPath), {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        bound_solution_id: action === 'bind' ? solution.id : null
+      })
+    });
+
+    if (!response.ok) throw new Error('Failed to ' + action);
+
+    showNotification(action === 'bind' ? (t('issues.solutionBound') || 'Solution bound') : (t('issues.solutionUnbound') || 'Solution unbound'), 'success');
+
+    // Refresh data
+    await loadIssueData();
+    const detail = await loadIssueDetail(issueId);
+    if (detail) {
+      issueData.selectedIssue = detail;
+      // Update solution reference
+      const updatedSolution = detail.solutions?.find(s => s.id === solution.id);
+      if (updatedSolution) {
+        issueData.selectedSolution = updatedSolution;
+        renderSolutionDetail(updatedSolution);
+      }
+      renderIssueDetailPanel(detail);
+    }
+  } catch (err) {
+    console.error('Failed to ' + action + ' solution:', err);
+    showNotification('Failed to ' + action + ' solution', 'error');
+  }
+}
+
+// Helper: escape HTML
+function escapeHtml(text) {
+  if (!text) return '';
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 function openQueueItemDetail(queueId) {
   const item = issueData.queue.queue?.find(q => q.queue_id === queueId);
   if (item) {
@@ -807,18 +1286,58 @@ function clearIssueSearch() {
 }
 
 // ========== Create Issue Modal ==========
+function generateIssueId() {
+  // Generate unique ID: ISSUE-YYYYMMDD-XXX format
+  const now = new Date();
+  const dateStr = now.getFullYear().toString() +
+    String(now.getMonth() + 1).padStart(2, '0') +
+    String(now.getDate()).padStart(2, '0');
+
+  // Find existing IDs with same date prefix
+  const prefix = 'ISSUE-' + dateStr + '-';
+  const existingIds = (issueData.issues || [])
+    .map(i => i.id)
+    .filter(id => id.startsWith(prefix));
+
+  // Get next sequence number
+  let maxSeq = 0;
+  existingIds.forEach(id => {
+    const seqStr = id.replace(prefix, '');
+    const seq = parseInt(seqStr, 10);
+    if (!isNaN(seq) && seq > maxSeq) {
+      maxSeq = seq;
+    }
+  });
+
+  return prefix + String(maxSeq + 1).padStart(3, '0');
+}
+
 function showCreateIssueModal() {
   const modal = document.getElementById('createIssueModal');
   if (modal) {
     modal.classList.remove('hidden');
+
+    // Auto-generate issue ID
+    const idInput = document.getElementById('newIssueId');
+    if (idInput) {
+      idInput.value = generateIssueId();
+    }
+
     lucide.createIcons();
-    // Focus on first input
+    // Focus on title input instead of ID
     setTimeout(() => {
-      document.getElementById('newIssueId')?.focus();
+      document.getElementById('newIssueTitle')?.focus();
     }, 100);
   }
 }
 
+function regenerateIssueId() {
+  const idInput = document.getElementById('newIssueId');
+  if (idInput) {
+    idInput.value = generateIssueId();
+  }
+}
+
 function hideCreateIssueModal() {
   const modal = document.getElementById('createIssueModal');
   if (modal) {
@@ -913,3 +1432,115 @@ async function deleteIssue(issueId) {
     showNotification('Failed to delete issue', 'error');
   }
 }
+
+// ========== Queue Operations ==========
+async function refreshQueue() {
+  try {
+    await loadQueueData();
+    renderIssueView();
+    showNotification(t('issues.queueRefreshed') || 'Queue refreshed', 'success');
+  } catch (err) {
+    showNotification('Failed to refresh queue', 'error');
+  }
+}
+
+function createExecutionQueue() {
+  showQueueCommandModal();
+}
+
+function showQueueCommandModal() {
+  // Create modal if not exists
+  let modal = document.getElementById('queueCommandModal');
+  if (!modal) {
+    modal = document.createElement('div');
+    modal.id = 'queueCommandModal';
+    modal.className = 'issue-modal';
+    document.body.appendChild(modal);
+  }
+
+  const command = 'claude /issue:queue';
+  const altCommand = 'ccw issue queue';
+
+  modal.innerHTML = `
+    <div class="issue-modal-backdrop" onclick="hideQueueCommandModal()"></div>
+    <div class="issue-modal-content" style="max-width: 560px;">
+      <div class="issue-modal-header">
+        <h3>${t('issues.createQueue') || 'Create Execution Queue'}</h3>
+        <button class="btn-icon" onclick="hideQueueCommandModal()">
+          <i data-lucide="x" class="w-5 h-5"></i>
+        </button>
+      </div>
+      <div class="issue-modal-body">
+        <p class="text-sm text-muted-foreground mb-4">
+          ${t('issues.queueCommandHint') || 'Run one of the following commands in your terminal to generate the execution queue from bound solutions:'}
+        </p>
+
+        <div class="command-option mb-3">
+          <label class="text-xs font-medium text-muted-foreground mb-1 block">
+            <i data-lucide="terminal" class="w-3 h-3 inline mr-1"></i>
+            Claude Code CLI
+          </label>
+          <div class="command-box">
+            <code class="command-text">${command}</code>
+            <button class="btn-icon" onclick="copyCommand('${command}')" title="${t('common.copy') || 'Copy'}">
+              <i data-lucide="copy" class="w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="command-option">
+          <label class="text-xs font-medium text-muted-foreground mb-1 block">
+            <i data-lucide="terminal" class="w-3 h-3 inline mr-1"></i>
+            CCW CLI (${t('issues.alternative') || 'Alternative'})
+          </label>
+          <div class="command-box">
+            <code class="command-text">${altCommand}</code>
+            <button class="btn-icon" onclick="copyCommand('${altCommand}')" title="${t('common.copy') || 'Copy'}">
+              <i data-lucide="copy" class="w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="command-info mt-4">
+          <p class="text-xs text-muted-foreground">
+            <i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
+            ${t('issues.queueCommandInfo') || 'After running the command, click "Refresh" to see the updated queue.'}
+          </p>
+        </div>
+      </div>
+      <div class="issue-modal-footer">
+        <button class="btn-secondary" onclick="hideQueueCommandModal()">${t('common.close') || 'Close'}</button>
+        <button class="btn-primary" onclick="hideQueueCommandModal(); refreshQueue();">
+          <i data-lucide="refresh-cw" class="w-4 h-4"></i>
+          ${t('issues.refreshAfter') || 'Refresh Queue'}
+        </button>
+      </div>
+    </div>
+  `;
+
+  modal.classList.remove('hidden');
+  lucide.createIcons();
+}
+
+function hideQueueCommandModal() {
+  const modal = document.getElementById('queueCommandModal');
+  if (modal) {
+    modal.classList.add('hidden');
+  }
+}
+
+function copyCommand(command) {
+  navigator.clipboard.writeText(command).then(() => {
+    showNotification(t('common.copied') || 'Copied to clipboard', 'success');
+  }).catch(err => {
+    console.error('Failed to copy:', err);
+    // Fallback: select text
+    const textArea = document.createElement('textarea');
+    textArea.value = command;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    showNotification(t('common.copied') || 'Copied to clipboard', 'success');
+  });
+}