create-claude-kanban 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-kanban",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Scaffold a multi-agent kanban system for Claude Code projects",
   "type": "module",
   "bin": {

package/templates/kanban.html

@@ -767,6 +767,152 @@
   .report-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 250; }
   .report-overlay.open { display: block; }
 
+  /* ── Task Detail Popup ── */
+  .td-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 400; backdrop-filter: blur(3px); }
+  .td-overlay.open { display: block; }
+  .td-popup {
+    display: none;
+    position: fixed;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    width: 680px;
+    max-width: 94vw;
+    max-height: 85vh;
+    background: var(--s1);
+    border: 1px solid var(--b1);
+    border-radius: 6px;
+    z-index: 410;
+    flex-direction: column;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  }
+  .td-popup.open { display: flex; }
+  .td-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--b1);
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+  .td-header-left { flex: 1; min-width: 0; }
+  .td-header h2 { font-size: 15px; font-weight: 700; color: var(--t1); line-height: 1.4; margin: 0; }
+  .td-header .td-id {
+    font-size: 11px;
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--t4);
+    margin-bottom: 4px;
+  }
+  .td-close {
+    background: none;
+    border: 1px solid var(--b1);
+    border-radius: var(--r);
+    color: var(--t3);
+    cursor: pointer;
+    font-size: 14px;
+    width: 28px; height: 28px;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+  }
+  .td-close:hover { color: var(--t1); background: var(--s3); }
+  .td-meta {
+    padding: 10px 20px;
+    border-bottom: 1px solid var(--b1);
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+  .td-tag {
+    font-size: 10px;
+    font-family: 'JetBrains Mono', monospace;
+    padding: 3px 8px;
+    border-radius: 2px;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+  }
+  .td-tag-status { background: var(--s3); color: var(--t2); }
+  .td-tag-status[data-s="in_progress"] { background: rgba(59,130,246,0.15); color: var(--ac); }
+  .td-tag-status[data-s="completed"] { background: rgba(34,197,94,0.15); color: var(--gn); }
+  .td-tag-status[data-s="in_review"] { background: rgba(139,92,246,0.15); color: var(--vl); }
+  .td-tag-priority { background: var(--s3); color: var(--t3); }
+  .td-tag-priority[data-p="high"] { background: rgba(239,68,68,0.12); color: var(--rd); }
+  .td-tag-agent { background: var(--s3); color: var(--t3); }
+  .td-tag-project { border: 1px solid var(--b1); color: var(--t3); }
+  .td-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+  }
+  .td-body .td-md { font-size: 13px; line-height: 1.75; color: var(--t2); }
+  .td-body .td-md h1 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; color: var(--t1); border-bottom: 1px solid var(--b1); padding-bottom: 8px; }
+  .td-body .td-md h2 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--t1); }
+  .td-body .td-md h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--t2); }
+  .td-body .td-md h4 { font-size: 12px; font-weight: 600; margin: 14px 0 4px; color: var(--t2); }
+  .td-body .td-md p { margin: 8px 0; }
+  .td-body .td-md ul, .td-body .td-md ol { margin: 6px 0; padding-left: 20px; }
+  .td-body .td-md li { margin: 3px 0; }
+  .td-body .td-md code { background: var(--bg); padding: 1px 6px; border-radius: 2px; font-size: 12px; border: 1px solid var(--b1); color: var(--t1); }
+  .td-body .td-md pre { background: var(--bg); padding: 14px; border-radius: var(--r); border: 1px solid var(--b1); overflow-x: auto; margin: 10px 0; }
+  .td-body .td-md pre code { background: none; border: none; padding: 0; }
+  .td-body .td-md table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
+  .td-body .td-md th { background: var(--s2); text-align: left; padding: 8px 12px; border: 1px solid var(--b1); font-weight: 600; color: var(--t1); }
+  .td-body .td-md td { padding: 6px 12px; border: 1px solid var(--b1); }
+  .td-body .td-md tr:hover td { background: var(--s2); }
+  .td-body .td-md blockquote { border-left: 2px solid var(--b2); padding: 4px 14px; margin: 10px 0; color: var(--t3); }
+  .td-body .td-md strong { color: var(--t1); }
+  .td-body .td-md hr { border: none; border-top: 1px solid var(--b1); margin: 20px 0; }
+  .td-body .td-section {
+    margin-bottom: 16px;
+  }
+  .td-body .td-section-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--t4);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+  .td-body .td-empty { text-align: center; padding: 40px; color: var(--t4); font-size: 12px; }
+  .td-footer {
+    padding: 12px 20px;
+    border-top: 1px solid var(--b1);
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+  .td-footer .btn { font-size: 12px; padding: 6px 14px; }
+  .td-deps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 4px;
+  }
+  .td-dep-chip {
+    font-size: 10px;
+    font-family: 'JetBrains Mono', monospace;
+    padding: 2px 8px;
+    border-radius: 2px;
+    background: var(--s3);
+    color: var(--ac);
+    cursor: pointer;
+  }
+  .td-dep-chip:hover { background: var(--s2); text-decoration: underline; }
+  .td-active-form {
+    font-size: 11px;
+    color: var(--am);
+    font-style: italic;
+    margin-top: 4px;
+  }
+  .td-ref {
+    color: var(--ac);
+    cursor: pointer;
+    font-weight: 600;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.92em;
+  }
+  .td-ref:hover { text-decoration: underline; }
+
   /* Report button on card */
   .card .report-btn {
     font-size: 9px;
@@ -1454,6 +1600,26 @@
   </div>
 </div>
 
+<div class="td-overlay" id="tdOverlay" onclick="closeTaskDetail()"></div>
+<div class="td-popup" id="tdPopup">
+  <div class="td-header">
+    <div class="td-header-left">
+      <div class="td-id" id="tdId"></div>
+      <h2 id="tdTitle"></h2>
+    </div>
+    <button class="td-close" onclick="closeTaskDetail()">&times;</button>
+  </div>
+  <div class="td-meta" id="tdMeta"></div>
+  <div class="td-body" id="tdBody">
+    <div class="td-empty">Loading...</div>
+  </div>
+  <div class="td-footer">
+    <button class="btn btn-ghost" onclick="closeTaskDetail()">Close</button>
+    <button class="btn btn-ghost" id="tdEditBtn" onclick="closeTaskDetail();editTask(tdCurrentId)">Edit</button>
+    <button class="btn btn-primary" id="tdBoardBtn" onclick="closeTaskDetail();scrollToCard(tdCurrentId)">Board</button>
+  </div>
+</div>
+
 <div class="activity-overlay" id="actOverlay" onclick="closeActivity()"></div>
 <div class="activity-panel" id="actPanel">
   <div class="ap-header">
@@ -2037,7 +2203,7 @@ document.addEventListener("keydown",function(e){
   if(e.ctrlKey&&e.shiftKey&&(e.key==="K"||e.key==="k")){e.preventDefault();stopExecution();return;}
   if(e.target.closest("input,select,textarea"))return;
   if(e.key==="n"||e.key==="N")openModal();
-  if(e.key==="Escape"){closeModal();closeReport();closeActivity();closeChat();}
+  if(e.key==="Escape"){if(tdCurrentId){closeTaskDetail();return;}closeModal();closeReport();closeActivity();closeChat();}
   if(e.key==="a"||e.key==="A")toggleActivity();
   if(e.key==="c"||e.key==="C")toggleChat();
 });
@@ -2080,6 +2246,102 @@ function closeReport(){
   document.getElementById("reportOverlay").classList.remove("open");
 }
 
+// ── Task Detail Popup ──
+var tdCurrentId=null;
+function openTaskDetail(id){
+  tdCurrentId=String(id);
+  var t=allTasks.find(function(x){return String(x.id)===tdCurrentId;});
+  if(!t){
+    // Task not in current view — fetch all and search
+    fetch("/api/tasks").then(function(r){return r.json();}).then(function(tasks){
+      var found=tasks.find(function(x){return String(x.id)===tdCurrentId;});
+      if(found)renderTaskDetail(found);
+      else showTaskDetailError(tdCurrentId);
+    }).catch(function(){showTaskDetailError(tdCurrentId);});
+  }else{
+    renderTaskDetail(t);
+  }
+  document.getElementById("tdOverlay").classList.add("open");
+  document.getElementById("tdPopup").classList.add("open");
+}
+function showTaskDetailError(id){
+  document.getElementById("tdId").textContent="#"+id;
+  document.getElementById("tdTitle").textContent="Task not found";
+  document.getElementById("tdMeta").innerHTML="";
+  document.getElementById("tdBody").innerHTML='<div class="td-empty">Task #'+esc(id)+' not found</div>';
+}
+function renderTaskDetail(t){
+  document.getElementById("tdId").textContent="#"+t.id+(t.project?" \u00B7 "+t.project:"");
+  document.getElementById("tdTitle").textContent=t.subject||"Untitled";
+  // Meta tags
+  var statusLabel={pending:"TO DO",in_progress:"IN PROGRESS",in_review:"IN REVIEW",completed:"DONE"};
+  var priorityLabel={high:"P0 URGENT",medium:"P1 NORMAL",low:"P2 LOW"};
+  var meta='<span class="td-tag td-tag-status" data-s="'+(t.status||"pending")+'">'+(statusLabel[t.status]||"PENDING")+'</span>';
+  if(t.priority)meta+='<span class="td-tag td-tag-priority" data-p="'+t.priority+'">'+(priorityLabel[t.priority]||t.priority.toUpperCase())+'</span>';
+  if(t.agent)meta+='<span class="td-tag td-tag-agent">'+esc(t.agent)+'</span>';
+  if(t.project)meta+='<span class="td-tag td-tag-project">'+esc(t.project)+'</span>';
+  document.getElementById("tdMeta").innerHTML=meta;
+  // Body
+  var html='';
+  // Description
+  if(t.description){
+    html+='<div class="td-section"><div class="td-section-label">Description</div>';
+    html+='<div class="td-md">'+renderMarkdown(t.description)+'</div>';
+    html+='</div>';
+  }
+  // Active form
+  if(t.activeForm&&t.status==="in_progress"){
+    html+='<div class="td-active-form">'+esc(t.activeForm)+'</div>';
+  }
+  // Dependencies
+  if(t.blockedBy&&t.blockedBy.length>0){
+    html+='<div class="td-section"><div class="td-section-label">Blocked By</div><div class="td-deps">';
+    for(var i=0;i<t.blockedBy.length;i++){
+      html+='<span class="td-dep-chip" onclick="openTaskDetail(\''+esc(String(t.blockedBy[i]))+'\')">'+esc("#"+t.blockedBy[i])+'</span>';
+    }
+    html+='</div></div>';
+  }
+  // Subtasks
+  if(t.subtasks&&t.subtasks.length>0){
+    html+='<div class="td-section"><div class="td-section-label">Subtasks</div><div class="td-deps">';
+    for(var i=0;i<t.subtasks.length;i++){
+      html+='<span class="td-dep-chip" onclick="openTaskDetail(\''+esc(String(t.subtasks[i]))+'\')">'+esc("#"+t.subtasks[i])+'</span>';
+    }
+    html+='</div></div>';
+  }
+  // Report summary
+  if(t.reportSummary){
+    html+='<div class="td-section"><div class="td-section-label">Report Summary</div>';
+    html+='<div class="td-md">'+renderMarkdown(t.reportSummary)+'</div>';
+    html+='</div>';
+  }
+  // Report path
+  if(t.reportPath){
+    html+='<div class="td-section"><div class="td-section-label">Report File</div>';
+    html+='<div style="font-size:11px;font-family:JetBrains Mono,monospace;color:var(--t3)">'+esc(t.reportPath)+'</div>';
+    html+='</div>';
+  }
+  // Timestamps
+  var times=[];
+  if(t.createdAt)times.push("Created: "+new Date(t.createdAt).toLocaleString("ko-KR"));
+  if(t.startedAt)times.push("Started: "+new Date(t.startedAt).toLocaleString("ko-KR"));
+  if(t.completedAt)times.push("Completed: "+new Date(t.completedAt).toLocaleString("ko-KR"));
+  if(times.length>0){
+    html+='<div class="td-section"><div class="td-section-label">Timeline</div>';
+    html+='<div style="font-size:11px;font-family:JetBrains Mono,monospace;color:var(--t4);line-height:1.8">'+times.join("<br>")+'</div>';
+    html+='</div>';
+  }
+  if(!html)html='<div class="td-empty">No details available</div>';
+  document.getElementById("tdBody").innerHTML=html;
+  // Footer buttons
+  document.getElementById("tdEditBtn").style.display=t._editable!==false?"inline-flex":"none";
+}
+function closeTaskDetail(){
+  document.getElementById("tdOverlay").classList.remove("open");
+  document.getElementById("tdPopup").classList.remove("open");
+  tdCurrentId=null;
+}
+
 function renderMarkdown(md){
   var html=esc(md);
   html=html.replace(/```(\w*)\n([\s\S]*?)```/g,function(m,lang,code){return '<pre><code>'+code+'</code></pre>';});
@@ -2112,6 +2374,8 @@ function renderMarkdown(md){
   html=html.replace(/<\/(h[1-4]|ul|ol|pre|table|blockquote)><\/p>/g,'</$1>');
   html=html.replace(/<hr><\/p>/g,'<hr>');
   html=html.replace(/<p><\/p>/g,'');
+  // Task #N references → clickable links (avoid matching inside tags/code)
+  html=html.replace(/(?<![&\w])#(\d{1,5})(?![\w<])/g,'<span class="td-ref" onclick="openTaskDetail(\'$1\')">#$1</span>');
   return html;
 }
 
@@ -2344,20 +2608,23 @@ function stripActionBlocks(text){
   return (text||"").replace(/:::action\n[\s\S]*?\n:::/g,"").trim();
 }
 function renderActionResult(ar){
+  var link=function(id){return '<span class="action-link" onclick="openTaskDetail(\''+esc(String(id))+'\')">\uC0C1\uC138</span>';};
   if(ar.action==="task_create"&&ar.ok){
-    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--gn)">+</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.task.id)+' \uC0DD\uC131: '+esc(ar.task.subject)+'</span><span class="action-link" onclick="scrollToCard(\''+esc(ar.task.id)+'\')">\uBCF4\uAE30</span></div>';
+    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--gn)">+</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.task.id)+' \uC0DD\uC131: '+esc(ar.task.subject)+'</span>'+link(ar.task.id)+'</div>';
   }
   if(ar.action==="task_update"&&ar.ok&&ar.task){
-    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--am)">~</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.task.id)+' \uC218\uC815\uB428</span></div>';
+    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--am)">~</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.task.id)+' \uC218\uC815\uB428</span>'+link(ar.task.id)+'</div>';
   }
   if(ar.action==="task_delete"&&ar.ok){
     return '<div class="chat-action-result"><span class="action-icon" style="color:var(--rd)">-</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.id)+' \uC0AD\uC81C\uB428</span></div>';
   }
   if(ar.action==="task_execute"&&ar.ok){
-    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--am)">\u25B6</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.id)+' \uC2E4\uD589 \uC2DC\uC791</span></div>';
+    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--am)">\u25B6</span><span class="action-text">\uD0DC\uC2A4\uD06C #'+esc(ar.id)+' \uC2E4\uD589 \uC2DC\uC791</span>'+link(ar.id)+'</div>';
   }
   if(ar.action==="task_execute_batch"&&ar.ok){
-    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--am)">\u25B6\u25B6</span><span class="action-text">\uD0DC\uC2A4\uD06C '+(ar.ids||[]).map(function(id){return"#"+id;}).join(", ")+' \uC77C\uAD04 \uC2E4\uD589</span></div>';
+    var ids=ar.ids||[];
+    var chips=ids.map(function(id){return '<span class="action-link" onclick="openTaskDetail(\''+esc(String(id))+'\')" style="margin-left:0">#'+esc(String(id))+'</span>';}).join(" ");
+    return '<div class="chat-action-result"><span class="action-icon" style="color:var(--am)">\u25B6\u25B6</span><span class="action-text">\uC77C\uAD04 \uC2E4\uD589</span>'+chips+'</div>';
   }
   return "";
 }