feat: plan mobile work by milestone (#203)

frontend/index.html

@@ -62,6 +62,8 @@ textarea { resize: vertical; min-height: 120px; }
 .work-filters { display:flex; gap:8px; flex-wrap:wrap; }
 .work-filter { min-height: 44px; }
 .work-filter[aria-pressed="true"] { border-color:var(--accent); background:#1d4f7a; }
+.milestone-lane { display:flex; align-items:center; gap:8px; min-width:min(100%,260px); }
+.work-milestone-filter { min-width:180px; flex:1; padding:8px; border-radius:8px; border:1px solid #1f3a5f; background:#0b1526; color:var(--text); }
 .my-work-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
 .my-work-card { min-height: 44px; display:grid; gap:8px; padding:12px; border:1px solid #1f3a5f; border-radius:12px; background:#0f1d33; color:var(--text); }
 .my-work-card-main { display:block; width:100%; color:var(--text); text-align:left; font:inherit; background:transparent; border:0; padding:0; }
@@ -153,6 +155,9 @@ textarea { resize: vertical; min-height: 120px; }
 .issue-due-editor input { box-sizing:border-box; width:100%; max-width:100%; }
 .issue-due-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .issue-due-editor input, .issue-due-editor button { min-height:44px; }
+.issue-milestone-editor { display:grid; gap:8px; max-width:100%; margin:14px 0; padding:12px; border:1px solid #2a496e; border-radius:12px; }
+.issue-milestone-editor select { width:100%; padding:8px; border-radius:8px; border:1px solid #1f3a5f; background:#0b1526; color:var(--text); }
+.work-milestone-filter, .issue-milestone-editor select, .issue-milestone-editor button { min-height:44px; }
 .issue-sheet-actions { position:sticky; bottom:0; z-index:3; display:grid; gap:8px; margin-top:14px; padding:10px 4px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(11,21,38,.98); border-top:1px solid #2a496e; }
 .issue-sheet-actions button, .issue-sheet-actions a { min-height:44px; display:flex; align-items:center; justify-content:center; }
 .issue-sheet-actions a { border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
@@ -269,6 +274,12 @@ textarea { resize: vertical; min-height: 120px; }
         <button class="work-filter" data-work-filter="review" aria-pressed="false">Reviews <span data-work-count="review">0</span></button>
         <button class="work-filter" data-work-filter="update" aria-pressed="false">Updates <span data-work-count="update">0</span></button>
       </div>
+      <label class="milestone-lane" for="work-milestone-filter"><span class="small">Release lane</span>
+        <select class="work-milestone-filter" id="work-milestone-filter">
+          <option value="all">All milestones</option>
+          <option value="unplanned">Unplanned</option>
+        </select>
+      </label>
     </div>
     <div class="my-work-list" id="my-work-list"></div>
     <div class="small" id="work-page-status" aria-live="polite"></div>
@@ -412,6 +423,13 @@ textarea { resize: vertical; min-height: 120px; }
       </div>
       <div id="issue-due-status" class="small" aria-live="assertive">Load an issue to schedule it.</div>
     </fieldset>
+    <fieldset class="issue-milestone-editor" aria-describedby="issue-milestone-status">
+      <legend>Milestone</legend>
+      <label for="issue-milestone" class="small">Plan this issue into a release</label>
+      <select id="issue-milestone" disabled><option value="">No milestone</option></select>
+      <button id="save-issue-milestone" type="button" disabled>Save milestone</button>
+      <div id="issue-milestone-status" class="small" aria-live="assertive">Load an issue to plan it.</div>
+    </fieldset>
     <p class="issue-sheet-content" id="issue-sheet-body"></p>
     <button id="edit-issue-content" type="button" disabled>Edit issue</button>
     <form class="issue-edit-form" id="issue-edit-form" hidden>
@@ -664,10 +682,14 @@ textarea { resize: vertical; min-height: 120px; }
   });
   let liveMode = true;
   const WORK_FILTER_KEY = 'stackchain.my-work-filter.v1';
+  const WORK_MILESTONE_KEY = 'stackchain.my-work-milestone.v1';
   let selectedWorkFilter = 'all';
+  let selectedWorkMilestone = 'all';
   try {
     const savedFilter = sessionStorage.getItem(WORK_FILTER_KEY);
     if (['all', 'issue', 'pull', 'review', 'update'].includes(savedFilter)) selectedWorkFilter = savedFilter;
+    const savedMilestone = sessionStorage.getItem(WORK_MILESTONE_KEY);
+    if (savedMilestone) selectedWorkMilestone = savedMilestone;
   } catch (e) {
     console.warn('Could not restore My Work filter', e);
   }
@@ -927,6 +949,7 @@ textarea { resize: vertical; min-height: 120px; }
   const workSession = createWorkSession({
     getItems: () => lastMyWork,
     getFilter: () => selectedWorkFilter,
+    getMilestone: () => selectedWorkMilestone,
     onOpen: openWorkSessionItem,
     onProgress: state => {
       document.querySelectorAll('.work-session-nav').forEach(nav => { nav.hidden = false; });
@@ -1020,6 +1043,20 @@ textarea { resize: vertical; min-height: 120px; }
       const element = qs('[data-work-count="' + filter + '"]');
       if (element) element.textContent = count;
     });
+    const milestoneSelect = qs('#work-milestone-filter');
+    const lanes = milestoneLanes(lastMyWork);
+    milestoneSelect.innerHTML = '<option value="all">All milestones</option>' +
+      '<option value="unplanned">Unplanned</option>' + lanes.map(lane =>
+        '<option value="' + Number(lane.id) + '">' + escapeHtml(lane.title) + '</option>'
+      ).join('');
+    milestoneSelect.value = selectedWorkMilestone;
+    if (milestoneSelect.value !== selectedWorkMilestone) {
+      const retained = document.createElement('option');
+      retained.value = selectedWorkMilestone;
+      retained.textContent = 'Selected milestone';
+      milestoneSelect.append(retained);
+      milestoneSelect.value = selectedWorkMilestone;
+    }
     qs('#my-work').removeAttribute('data-stale');
     qs('#my-work-status').textContent = lastMyWork.length ?
       summarizeMyWork(lastMyWork) : 'No assigned work, review requests, or unread updates.';
@@ -1052,7 +1089,7 @@ textarea { resize: vertical; min-height: 120px; }
   }
 
   function renderMyWork() {
-    const visible = filterMyWork(lastMyWork, selectedWorkFilter);
+    const visible = filterMyWork(lastMyWork, selectedWorkFilter, selectedWorkMilestone);
     const incomplete = activeWorkStreams().some(stream => workPagination[stream]?.has_more);
     qs('#my-work-list').innerHTML = visible.length ? visible.map(item => {
       const index = lastMyWork.findIndex(candidate => candidate.key === item.key && candidate.kind === item.kind);
@@ -1060,6 +1097,7 @@ textarea { resize: vertical; min-height: 120px; }
       '<span class="small">' + escapeHtml(item.key) + ' · ' + escapeHtml(item.kind === 'pull' ? 'PR' : (item.kind === 'update' ? 'Update' : 'Issue')) + '</span>' +
       '<span class="my-work-card-title">' + escapeHtml(item.title) + '</span>' +
       '<span class="pill">' + escapeHtml(item.reason) + '</span>' +
+      (item.milestone?.title ? ' <span class="pill milestone-badge">' + escapeHtml(item.milestone.title) + '</span>' : '') +
       (item.due_label ? ' <span class="pill due-badge">' + escapeHtml(item.due_label) + '</span>' : '') +
       (item.has_update ? ' <span class="pill">Unread update</span>' : '') +
       (item.updated_at ? '<span class="small"> · Updated ' + escapeHtml(fmt(item.updated_at)) + '</span>' : '');
@@ -1197,6 +1235,30 @@ textarea { resize: vertical; min-height: 120px; }
       .map(input => Number(input.value)).filter(Number.isInteger);
   }
 
+  async function loadIssueMilestoneEditor(item, confirmedMilestone) {
+    const select = qs('#issue-milestone');
+    const status = qs('#issue-milestone-status');
+    select.innerHTML = '<option value="">No milestone</option>';
+    select.disabled = true;
+    qs('#save-issue-milestone').disabled = true;
+    status.textContent = 'Loading milestones…';
+    try {
+      const milestones = await issueController.loadMilestones(item);
+      if (selectedIssue !== item) return;
+      select.innerHTML += milestones.map(milestone =>
+        '<option value="' + Number(milestone.id) + '">' + escapeHtml(milestone.title) + '</option>'
+      ).join('');
+      const draft = issueController.loadMilestoneDraft(item);
+      select.value = String(draft ?? confirmedMilestone?.id ?? '');
+      select.disabled = false;
+      qs('#save-issue-milestone').disabled = false;
+      status.textContent = confirmedMilestone ?
+        'Planned for ' + confirmedMilestone.title + '.' : 'No milestone set.';
+    } catch (_error) {
+      status.textContent = 'Milestones could not be loaded. Retry by reopening this issue.';
+    }
+  }
+
   async function openIssueSheet(item, trigger) {
     if (!item) return;
     selectedIssue = item;
@@ -1220,6 +1282,10 @@ textarea { resize: vertical; min-height: 120px; }
     qs('#save-issue-due-date').disabled = true;
     qs('#clear-issue-due-date').disabled = true;
     qs('#issue-due-status').textContent = 'Loading due date…';
+    qs('#issue-milestone').innerHTML = '<option value="">No milestone</option>';
+    qs('#issue-milestone').disabled = true;
+    qs('#save-issue-milestone').disabled = true;
+    qs('#issue-milestone-status').textContent = 'Loading milestones…';
     qs('#retry-issue-load').hidden = true;
     qs('#open-issue-gitea').href = item.url || '#';
     qs('#send-issue-comment').disabled = false;
@@ -1238,6 +1304,7 @@ textarea { resize: vertical; min-height: 120px; }
         '<span class="pill">' + escapeHtml(label) + '</span>'
       ).join(' ');
       loadIssueLabelEditor(item, detail.labels || []);
+      loadIssueMilestoneEditor(item, detail.milestone);
       qs('#issue-assignees').textContent = (detail.assignees || []).length ?
         'Assigned to ' + detail.assignees.join(', ') : 'No assignee reported';
       qs('#issue-comments').innerHTML = (detail.comments || []).length ?
@@ -2211,6 +2278,33 @@ textarea { resize: vertical; min-height: 120px; }
     saveSelectedIssueDueDate(value + 'T23:59:59Z');
   });
   qs('#clear-issue-due-date').addEventListener('click', () => saveSelectedIssueDueDate(null));
+  qs('#save-issue-milestone').addEventListener('click', async () => {
+    if (!selectedIssue || !lastContextSnapshot) return;
+    const editing = selectedIssue;
+    const button = qs('#save-issue-milestone');
+    const raw = qs('#issue-milestone').value;
+    const milestoneId = raw ? Number(raw) : null;
+    button.disabled = true;
+    qs('#issue-milestone').disabled = true;
+    qs('#issue-milestone-status').textContent = milestoneId ? 'Saving milestone…' : 'Clearing milestone…';
+    try {
+      const confirmed = await issueController.updateMilestone(editing, milestoneId);
+      lastContextSnapshot = buildMyWork.replaceIssueMilestone(
+        lastContextSnapshot, editing.repository, editing.number, confirmed.milestone
+      );
+      selectedIssue = { ...editing, milestone: confirmed.milestone };
+      selectedIssueDetail = { ...selectedIssueDetail, milestone: confirmed.milestone };
+      paintMyWork(lastContextSnapshot);
+      qs('#issue-milestone-status').textContent = confirmed.milestone ?
+        'Planned for ' + confirmed.milestone.title + '. Release lane updated.' : 'Milestone cleared.';
+    } catch (error) {
+      qs('#issue-milestone-status').textContent = error.message + ' Your selection is safe; retry.';
+      qs('#issue-milestone').focus();
+    } finally {
+      button.disabled = false;
+      qs('#issue-milestone').disabled = false;
+    }
+  });
   qs('#send-issue-comment').addEventListener('click', async () => {
     if (!selectedIssue) return;
     const body = qs('#issue-comment').value.trim();
@@ -2552,6 +2646,13 @@ textarea { resize: vertical; min-height: 120px; }
       updateWorkPaginationControls();
     });
   });
+  qs('#work-milestone-filter').addEventListener('change', event => {
+    selectedWorkMilestone = event.target.value;
+    try { sessionStorage.setItem(WORK_MILESTONE_KEY, selectedWorkMilestone); }
+    catch (e) { console.warn('Could not persist My Work milestone lane', e); }
+    renderMyWork();
+    if (workSession.active()) workSession.reconcile();
+  });
   contextPoller.start();
   document.addEventListener('visibilitychange', () => {
     contextPoller.setVisible(!document.hidden);

frontend/issue-sheet.js

@@ -5,6 +5,7 @@ function createIssueSheet({ fetchJson, storage, createOperationId = () => global
   let labelRequest = null;
   let editRequest = null;
   let dueDateRequest = null;
+  let milestoneRequest = null;
   const issuePath = item => 'api/v1/repos/' + item.repository.split('/').map(encodeURIComponent).join('/') +
     '/issues/' + encodeURIComponent(item.number);
   const draftKey = item => 'stackchain.issue-comment.v1:' + item.repository + '#' + item.number;
@@ -12,6 +13,7 @@ function createIssueSheet({ fetchJson, storage, createOperationId = () => global
   const labelDraftKey = item => 'stackchain.issue-labels.v1:' + item.repository + '#' + item.number;
   const editDraftKey = item => 'stackchain.issue-content.v1:' + item.repository + '#' + item.number;
   const dueDateDraftKey = item => 'stackchain.issue-due-date.v1:' + item.repository + '#' + item.number;
+  const milestoneDraftKey = item => 'stackchain.issue-milestone.v1:' + item.repository + '#' + item.number;
 
   return {
     load(item) {
@@ -24,6 +26,12 @@ function createIssueSheet({ fetchJson, storage, createOperationId = () => global
         headers: { Accept: 'application/json' },
       });
     },
+    loadMilestones(item) {
+      const repository = item.repository.split('/').map(encodeURIComponent).join('/');
+      return fetchJson('api/v1/repos/' + repository + '/milestones', {
+        headers: { Accept: 'application/json' },
+      });
+    },
     loadDraft(item) {
       try { return storage?.getItem(draftKey(item)) || ''; }
       catch (_error) { return ''; }
@@ -93,6 +101,33 @@ function createIssueSheet({ fetchJson, storage, createOperationId = () => global
       }).finally(() => { dueDateRequest = null; });
       return dueDateRequest;
     },
+    loadMilestoneDraft(item) {
+      try {
+        const raw = storage?.getItem(milestoneDraftKey(item));
+        if (raw === null || raw === undefined) return null;
+        const value = JSON.parse(raw);
+        return value === null || Number.isInteger(value) ? value : null;
+      } catch (_error) { return null; }
+    },
+    updateMilestone(item, milestoneId) {
+      if (milestoneRequest) return milestoneRequest;
+      try { storage?.setItem(milestoneDraftKey(item), JSON.stringify(milestoneId)); }
+      catch (_error) { /* The select remains the fallback. */ }
+      milestoneRequest = fetchJson(issuePath(item) + '/milestone', {
+        method: 'PATCH',
+        headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+        body: JSON.stringify({ milestone_id: milestoneId }),
+      }).then(result => {
+        if (result?.number !== item.number ||
+            (milestoneId === null ? result?.milestone !== null : result?.milestone?.id !== milestoneId)) {
+          throw new Error('Issue milestone was not confirmed.');
+        }
+        try { storage?.removeItem(milestoneDraftKey(item)); }
+        catch (_error) { /* Confirmed upstream milestone is authoritative. */ }
+        return result;
+      }).finally(() => { milestoneRequest = null; });
+      return milestoneRequest;
+    },
     loadLabelDraft(item) {
       try {
         const value = JSON.parse(storage?.getItem(labelDraftKey(item)) || '[]');

frontend/my-work.js

@@ -353,11 +353,29 @@ function createNotificationReplier({
   };
 }
 
-function filterMyWork(items, selectedFilter) {
-  if (selectedFilter === 'all') return items;
-  if (selectedFilter === 'review') return items.filter((item) => item.is_review);
-  if (selectedFilter === 'update') return items.filter((item) => item.has_update);
-  return items.filter((item) => item.kind === selectedFilter);
+function filterMyWork(items, selectedFilter, selectedMilestone = 'all') {
+  let filtered = items;
+  if (selectedFilter === 'review') filtered = items.filter((item) => item.is_review);
+  else if (selectedFilter === 'update') filtered = items.filter((item) => item.has_update);
+  else if (selectedFilter !== 'all') filtered = items.filter((item) => item.kind === selectedFilter);
+  if (selectedMilestone === 'all') return filtered;
+  if (selectedMilestone === 'unplanned') {
+    return filtered.filter(item => item.kind === 'issue' && !item.milestone);
+  }
+  return filtered.filter(item =>
+    item.kind === 'issue' && String(item.milestone?.id || '') === String(selectedMilestone)
+  );
+}
+
+function milestoneLanes(items) {
+  const lanes = new Map();
+  (items || []).forEach(item => {
+    if (item?.kind === 'issue' && Number.isInteger(item.milestone?.id) &&
+        typeof item.milestone?.title === 'string') {
+      lanes.set(item.milestone.id, { id: item.milestone.id, title: item.milestone.title });
+    }
+  });
+  return Array.from(lanes.values()).sort((left, right) => left.title.localeCompare(right.title));
 }
 
 function workIdentity(item) {
@@ -369,12 +387,12 @@ function workIdentity(item) {
   return [kind, repository, number, notification].join(':');
 }
 
-function createWorkSession({ getItems, getFilter, onOpen, onProgress, onFinish }) {
+function createWorkSession({ getItems, getFilter, getMilestone = () => 'all', onOpen, onProgress, onFinish }) {
   let currentIdentity = '';
   let currentIndex = -1;
   let running = false;
 
-  const queue = () => filterMyWork(getItems() || [], getFilter());
+  const queue = () => filterMyWork(getItems() || [], getFilter(), getMilestone());
   const report = (items, index) => onProgress({
     index: index + 1,
     total: items.length,
@@ -465,6 +483,15 @@ function replaceIssueDueDate(data, repository, number, dueDate) {
   };
 }
 
+function replaceIssueMilestone(data, repository, number, milestone) {
+  return {
+    ...data,
+    issues: (data.issues || []).map(item =>
+      item.repository === repository && item.number === number ? { ...item, milestone } : item
+    ),
+  };
+}
+
 function removeIssue(data, repository, number) {
   return {
     ...data,
@@ -496,11 +523,13 @@ function countMyWork(items) {
 
 if (typeof module !== 'undefined' && module.exports) {
   buildMyWork.filterMyWork = filterMyWork;
+  buildMyWork.milestoneLanes = milestoneLanes;
   buildMyWork.createWorkSession = createWorkSession;
   buildMyWork.workIdentity = workIdentity;
   buildMyWork.replaceIssueLabels = replaceIssueLabels;
   buildMyWork.replaceIssueContent = replaceIssueContent;
   buildMyWork.replaceIssueDueDate = replaceIssueDueDate;
+  buildMyWork.replaceIssueMilestone = replaceIssueMilestone;
   buildMyWork.removeIssue = removeIssue;
   buildMyWork.summarizeMyWork = summarizeMyWork;
   buildMyWork.countMyWork = countMyWork;