Board Enhancements: Column Reordering, Subtask Nesting, Richer Cards, and Unplanned Work

app/assets/stylesheets/korkban.css

@@ -162,7 +162,8 @@ html, body { background: var(--kb-bg); font-family: var(--kb-ui); color: var(--k
   font: 600 11.5px var(--kb-ui); color: var(--kb-text-soft);
 }
 
-.kb-sync { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--kb-ui); color: var(--kb-text-mute); }
+.kb-sync { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--kb-ui); color: var(--kb-text-mute); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; }
+.kb-sync:hover { opacity: 0.7; }
 .kb-sync .dot { width: 7px; height: 7px; border-radius: 50%; }
 .kb-sync .dot-green { background: #22c55e; }
 .kb-sync .dot-amber { background: #eab308; }
@@ -228,6 +229,8 @@ html, body { background: var(--kb-bg); font-family: var(--kb-ui); color: var(--k
   flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
 }
 .kb-col-count { font-size: 11px; font-weight: 700; color: var(--kb-text-mute); flex: 0 0 auto; }
+a.kb-col-name { text-decoration: none; color: inherit; }
+a.kb-col-name:hover { text-decoration: underline; }
 .kb-col-meta { display: flex; align-items: center; gap: 6px; margin: 6px 0 7px; }
 .kb-col-key { font-family: var(--kb-mono); font-size: 9px; color: var(--kb-text-faint); font-weight: 600; }
 .kb-col-stale {
@@ -299,14 +302,32 @@ html, body { background: var(--kb-bg); font-family: var(--kb-ui); color: var(--k
 .kb-card[data-spotlight="1"] { box-shadow: 0 0 0 2px #1e293b, 0 8px 20px rgba(0,0,0,.18); }
 .kb-card[data-critical="1"] { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
 .kb-card[data-hidden="1"] { display: none; }
+.kb-card-subtask {
+  margin-left: 20px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  border-left-width: 3px;
+}
+.kb-card-subtask::before {
+  content: "";
+  position: absolute;
+  left: -15px;
+  top: -7px;
+  width: 11px;
+  height: 21px;
+  border-left: 2px solid var(--kb-border-strong);
+  border-bottom: 2px solid var(--kb-border-strong);
+  border-bottom-left-radius: 6px;
+  pointer-events: none;
+}
+.kb-card-subtask .kb-card-title { font-size: 12px; }
 
 .kb-card-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
 .kb-card-id {
   font-family: var(--kb-mono); font-size: 10.5px; font-weight: 600;
   color: #5b6675; letter-spacing: .2px;
-  opacity: 0; transition: opacity .13s;
+  opacity: 1;
 }
-.kb-card:hover .kb-card-id { opacity: 1; }
 .kb-card-meta { margin-left: auto; display: flex; align-items: center; gap: 5px; }
 .kb-step-chip {
   font: 800 9.5px var(--kb-ui);
@@ -364,6 +385,13 @@ html, body { background: var(--kb-bg); font-family: var(--kb-ui); color: var(--k
 [data-theme="dark"] .kb-card[data-staleness="somewhat"] .kb-avatar { box-shadow: 0 0 0 1.5px #2a2317; }
 [data-theme="dark"] .kb-card[data-staleness="really"] .kb-avatar { box-shadow: 0 0 0 1.5px #2c1818; }
 
+/* ---------- column drag-and-drop ---------- */
+.kb-col-head { cursor: grab; user-select: none; }
+.kb-col-head:active { cursor: grabbing; }
+.kb-col[data-dragging="1"] { opacity: 0.4; }
+.kb-col[data-drop-side="left"]  { box-shadow: -3px 0 0 0 #3b82f6; }
+.kb-col[data-drop-side="right"] { box-shadow:  3px 0 0 0 #3b82f6; }
+
 /* animations */
 .kb-fade-in { animation: pgfade .16s ease-out; }
 @keyframes pgfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

app/controllers/syncs_controller.rb

@@ -0,0 +1,6 @@
+class SyncsController < ApplicationController
+  def create
+    JiraSyncJob.perform_later
+    head :no_content
+  end
+end

app/helpers/board_helper.rb

@@ -22,6 +22,8 @@ module BoardHelper
   TYPE_STYLE = {
     "story" => { color: "#16a34a", shape: :square },
     "task"  => { color: "#2563eb", shape: :square },
+    "sub-task" => { color: "#0d9488", shape: :square },
+    "subtask"  => { color: "#0d9488", shape: :square },
     "bug"   => { color: "#dc2626", shape: :circle },
     "spike" => { color: "#7c3aed", shape: :square },
     "epic"  => { color: "#a855f7", shape: :square }
@@ -128,6 +130,8 @@ def type_icon_svg(issue_type, size: 14)
               '<path d="M5 4.2h6v7.6l-3-2.2-3 2.2z" fill="#fff"/>'
     when "task"
               '<path d="M4.6 8.2l2 2 4-4.4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>'
+    when "sub-task", "subtask"
+              '<path d="M4.4 5.2h3.2v3.2H4.4zM8.4 8.2h3.2v3.2H8.4z" fill="#fff"/>'
     when "bug"
               '<circle cx="8" cy="8" r="2.4" fill="#fff"/>'
     when "spike"

app/javascript/controllers/board_controller.js

@@ -21,11 +21,24 @@ export default class extends Controller {
     this._onWinResize = () => this._positionTooltip()
     window.addEventListener("scroll", this._onWinResize, true)
     window.addEventListener("resize", this._onWinResize)
+    this._setupColumnDrag()
+    this._restoreColOrder()
+    this._colObserver = new MutationObserver(() => {
+      clearTimeout(this._morphTimer)
+      this._morphTimer = setTimeout(() => {
+        this._colObserver.disconnect()
+        this._restoreColOrder()
+        this._colObserver.observe(this.rootTarget, { childList: true })
+      }, 0)
+    })
+    this._colObserver.observe(this.rootTarget, { childList: true })
   }
 
   disconnect() {
     window.removeEventListener("scroll", this._onWinResize, true)
     window.removeEventListener("resize", this._onWinResize)
+    this._teardownColumnDrag()
+    if (this._colObserver) this._colObserver.disconnect()
   }
 
   // ---------- search ----------
@@ -194,6 +207,15 @@ export default class extends Controller {
     const staleClass = stale ? ds.tooltipStale : null
     const staleColor = ds.tooltipStale === "critical" ? "#fca5a5"
                     : ds.tooltipStale === "stale" ? "#fdba74" : "#e8ecf2"
+    const parentRow = ds.tooltipParent
+      ? `<span class="lbl">Parent</span><span class="val">${this._esc(ds.tooltipParent)}</span>`
+      : ""
+    const labelsRow = ds.tooltipLabels
+      ? `<span class="lbl">Labels</span><span class="val">${this._esc(ds.tooltipLabels)}</span>`
+      : ""
+    const componentsRow = ds.tooltipComponents
+      ? `<span class="lbl">Components</span><span class="val">${this._esc(ds.tooltipComponents)}</span>`
+      : ""
     this.tooltipTarget.innerHTML = `
       <div class="kb-tt-row">
         <span class="kb-tt-id">${ds.tooltipId || ""}</span>
@@ -202,6 +224,9 @@ export default class extends Controller {
       <div class="kb-tt-title">${this._esc(ds.tooltipTitle || "")}</div>
       <div class="kb-tt-grid">
         <span class="lbl">Type</span><span class="val">${this._esc(ds.tooltipType || "—")}</span>
+        ${parentRow}
+        ${labelsRow}
+        ${componentsRow}
         <span class="lbl">Assignee</span><span class="val">${this._esc(ds.tooltipAssignee || "Unassigned")}</span>
         <span class="lbl">In state</span><span class="val" style="color:${staleColor}">${ds.tooltipDays ? ds.tooltipDays + " days" : "—"}${stale ? " · " + staleClass : ""}</span>
         <span class="lbl">Priority</span><span class="val">${this._esc(ds.tooltipPriority || "Medium")}</span>
@@ -235,6 +260,98 @@ export default class extends Controller {
     }[c]))
   }
 
+  // ---------- column drag-and-drop ----------
+  _setupColumnDrag() {
+    const root = this.rootTarget
+    this._draggedCol = null
+    this._dropTarget = null
+    this._dropBefore = false
+
+    this._onColDragStart = (e) => {
+      const head = e.target.closest(".kb-col-head")
+      if (!head) return
+      const col = head.closest(".kb-col")
+      if (!col) return
+      this._draggedCol = col
+      col.dataset.dragging = "1"
+      e.dataTransfer.effectAllowed = "move"
+      e.dataTransfer.setData("text/plain", col.dataset.epicKey || "")
+    }
+
+    this._onColDragOver = (e) => {
+      if (!this._draggedCol) return
+      const col = e.target.closest(".kb-col")
+      if (!col || col === this._draggedCol) return
+      e.preventDefault()
+      e.dataTransfer.dropEffect = "move"
+      const rect = col.getBoundingClientRect()
+      const before = e.clientX < rect.left + rect.width / 2
+      if (this._dropTarget !== col || this._dropBefore !== before) {
+        root.querySelectorAll(".kb-col[data-drop-side]").forEach(c => delete c.dataset.dropSide)
+        col.dataset.dropSide = before ? "left" : "right"
+        this._dropTarget = col
+        this._dropBefore = before
+      }
+    }
+
+    this._onColDrop = (e) => {
+      e.preventDefault()
+      root.querySelectorAll(".kb-col[data-drop-side]").forEach(c => delete c.dataset.dropSide)
+      if (this._dropTarget && this._draggedCol) {
+        if (this._dropBefore) {
+          root.insertBefore(this._draggedCol, this._dropTarget)
+        } else {
+          this._dropTarget.after(this._draggedCol)
+        }
+        this._saveColOrder()
+      }
+      this._dropTarget = null
+    }
+
+    this._onColDragEnd = () => {
+      if (this._draggedCol) {
+        delete this._draggedCol.dataset.dragging
+        this._draggedCol = null
+      }
+      root.querySelectorAll(".kb-col[data-drop-side]").forEach(c => delete c.dataset.dropSide)
+      this._dropTarget = null
+    }
+
+    root.addEventListener("dragstart", this._onColDragStart)
+    root.addEventListener("dragover", this._onColDragOver)
+    root.addEventListener("drop", this._onColDrop)
+    root.addEventListener("dragend", this._onColDragEnd)
+  }
+
+  _teardownColumnDrag() {
+    if (!this.hasRootTarget) return
+    const root = this.rootTarget
+    root.removeEventListener("dragstart", this._onColDragStart)
+    root.removeEventListener("dragover", this._onColDragOver)
+    root.removeEventListener("drop", this._onColDrop)
+    root.removeEventListener("dragend", this._onColDragEnd)
+  }
+
+  _saveColOrder() {
+    const order = [...this.rootTarget.querySelectorAll(":scope > .kb-col")].map(c => c.dataset.epicKey)
+    localStorage.setItem("kb-col-order", JSON.stringify(order))
+  }
+
+  _restoreColOrder() {
+    try {
+      const saved = JSON.parse(localStorage.getItem("kb-col-order") || "null")
+      if (!saved || !Array.isArray(saved) || saved.length === 0) return
+      const root = this.rootTarget
+      const cols = [...root.querySelectorAll(":scope > .kb-col")]
+      const byKey = Object.fromEntries(cols.map(c => [c.dataset.epicKey, c]))
+      const seen = new Set()
+      saved.forEach(key => {
+        if (byKey[key]) { root.appendChild(byKey[key]); seen.add(key) }
+      })
+      cols.forEach(c => { if (!seen.has(c.dataset.epicKey)) root.appendChild(c) })
+    } catch {}
+  }
+
   // ---------- persistence ----------
   persist() {
     const state = {

app/models/issue.rb

@@ -3,4 +3,28 @@ class Issue < ApplicationRecord
 
   scope :active, -> { where(removed_at: nil) }
   scope :orphan, -> { where(epic_id: nil) }
+
+  def parent_jira_key
+    fields = raw_fields || {}
+    parent = fields["parent"] || fields[:parent]
+    return nil unless parent.respond_to?(:[])
+
+    parent["key"] || parent[:key]
+  end
+
+  def labels
+    fields = raw_fields || {}
+    Array(fields["labels"] || fields[:labels]).filter_map { |label| label.to_s.presence }
+  end
+
+  def components
+    fields = raw_fields || {}
+    Array(fields["components"] || fields[:components]).filter_map do |component|
+      if component.is_a?(Hash)
+        (component["name"] || component[:name]).to_s.presence
+      else
+        component.to_s.presence
+      end
+    end
+  end
 end

app/services/board_presenter.rb

@@ -1,5 +1,8 @@
+require "set"
+
 class BoardPresenter
   Warning = Struct.new(:issue_key, :status, :reason)
+  IssueRow = Struct.new(:postit, :depth)
 
   IssuePresenter = Struct.new(:issue, :display_status, :staleness) do
     def jira_key        = issue.jira_key
@@ -8,6 +11,9 @@ def assignee        = issue.assignee_username
     def jira_status     = issue.jira_status
     def issue_type      = issue.issue_type
     def priority        = issue.priority
+    def parent_jira_key = issue.parent_jira_key
+    def labels          = issue.labels
+    def components      = issue.components
     def created_at_jira = issue.created_at_jira
     def status_changed_at_jira = issue.status_changed_at_jira
     def transitioned_at = issue.status_changed_at_jira || issue.created_at_jira
@@ -17,9 +23,32 @@ def transitioned_at = issue.status_changed_at_jira || issue.created_at_jira
     def all_issues
       new_issues + middle_groups.values.flatten + done_issues
     end
+
+    def issue_rows_for(postits)
+      issue_keys = Set.new(postits.map(&:jira_key))
+      children_by_parent = Hash.new { |h, k| h[k] = [] }
+      child_keys = Set.new
+
+      postits.each do |postit|
+        parent_key = postit.parent_jira_key
+        next if parent_key.blank? || !issue_keys.include?(parent_key)
+
+        children_by_parent[parent_key] << postit
+        child_keys << postit.jira_key
+      end
+
+      postits.each_with_object([]) do |postit, rows|
+        next if child_keys.include?(postit.jira_key)
+
+        rows << IssueRow.new(postit, 0)
+        children_by_parent[postit.jira_key].each do |child|
+          rows << IssueRow.new(child, 1)
+        end
+      end
+    end
   end
 
-  UNPLANNED_EPIC = Struct.new(:jira_key, :name).new("UNPLANNED", "Unplanned")
+  UNPLANNED_EPIC = Struct.new(:jira_key, :name).new("UNPLANNED", "Unplanned Work")
 
   def initialize(epics:, status_map:, new_statuses:, done_statuses:, staleness:, orphan_issues: [])
     @epics = epics