feat: recover mobile drafts from My Work (#211)

frontend/drafts.js

@@ -0,0 +1,144 @@
+function createDraftInbox({ storage, now = () => Date.now() }) {
+  const indexKey = 'stackchain.draft-index.v1';
+
+  function readIndex() {
+    try {
+      const value = JSON.parse(storage?.getItem(indexKey) || '{}');
+      return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+    } catch (_error) { return {}; }
+  }
+
+  function writeIndex(index) {
+    try { storage?.setItem(indexKey, JSON.stringify(index)); }
+    catch (_error) { /* Draft discovery remains available without metadata. */ }
+  }
+
+  function keys() {
+    try {
+      return Array.from({ length: Number(storage?.length || 0) }, (_, index) => storage.key(index))
+        .filter(Boolean);
+    } catch (_error) { return []; }
+  }
+
+  function textPreview(value) {
+    return String(value || '').replace(/\s+/g, ' ').trim().slice(0, 180);
+  }
+
+  function parseTarget(value) {
+    const match = String(value || '').match(/^(.+)#(\d+)$/);
+    return match ? { repository: match[1], number: Number(match[2]) } : null;
+  }
+
+  function parse(key, raw) {
+    let match;
+    if (key === 'stackchain.issue-capture.v1') {
+      try {
+        const value = JSON.parse(raw);
+        const preview = textPreview([value?.title, value?.body].filter(Boolean).join(' — '));
+        if (!preview && !value?.repository) return null;
+        return {
+          kind: 'new-issue', label: 'New issue', repository: String(value?.repository || ''),
+          title: textPreview(value?.title) || 'Untitled new issue', preview,
+        };
+      } catch (_error) { return null; }
+    }
+    match = key.match(/^stackchain\.(issue|pull)-comment\.v1:(.+#\d+)$/);
+    if (match) {
+      const target = parseTarget(match[2]);
+      const preview = textPreview(raw);
+      if (!target || !preview) return null;
+      const routeKind = match[1] === 'issue' ? 'issue' : 'pull';
+      return {
+        kind: routeKind + '-comment', label: routeKind === 'issue' ? 'Issue comment' : 'PR comment',
+        ...target, title: target.repository + '#' + target.number, preview,
+        route: { kind: routeKind, ...target },
+      };
+    }
+    match = key.match(/^stackchain\.issue-content\.v1:(.+#\d+)$/);
+    if (match) {
+      const target = parseTarget(match[1]);
+      try {
+        const value = JSON.parse(raw);
+        const preview = textPreview([value?.title, value?.body].filter(Boolean).join(' — '));
+        if (!target || !preview || typeof value?.expectedUpdatedAt !== 'string') return null;
+        return {
+          kind: 'issue-edit', label: 'Issue edit', ...target,
+          title: target.repository + '#' + target.number, preview,
+          route: { kind: 'issue', ...target },
+        };
+      } catch (_error) { return null; }
+    }
+    match = key.match(/^stackchain\.update-reply\.v1\.(\d+)$/);
+    if (match) {
+      const preview = textPreview(raw);
+      if (!preview) return null;
+      const notificationId = Number(match[1]);
+      return {
+        kind: 'update-reply', label: 'Update reply', notification_id: notificationId,
+        title: 'Update #' + notificationId, preview,
+        route: { kind: 'update', notification_id: notificationId },
+      };
+    }
+    match = key.match(/^stackchain\.review-draft\.v1:(.+#\d+)@([^:]+)$/);
+    if (match) {
+      const target = parseTarget(match[1]);
+      try {
+        const value = JSON.parse(raw);
+        const notes = Object.values(value?.notes || {});
+        const comments = Array.isArray(value?.comments) ? value.comments.map(item => item?.body) : [];
+        const preview = textPreview([value?.summary, ...notes, ...comments].filter(Boolean).join(' — '));
+        if (!target || !preview) return null;
+        return {
+          kind: 'review', label: 'PR review', ...target, head_sha: match[2],
+          title: target.repository + '#' + target.number, preview,
+          route: { kind: 'review', ...target },
+        };
+      } catch (_error) { return null; }
+    }
+    return null;
+  }
+
+  function list() {
+    const index = readIndex();
+    const seen = new Set();
+    const drafts = [];
+    keys().forEach(key => {
+      if (key === indexKey || key.endsWith(':operation')) return;
+      let raw;
+      try { raw = storage.getItem(key); }
+      catch (_error) { return; }
+      const parsed = parse(key, raw);
+      if (!parsed) return;
+      seen.add(key);
+      const fingerprint = String(raw);
+      const previous = index[key];
+      if (!previous || previous.fingerprint !== fingerprint) {
+        index[key] = { fingerprint, updated_at: Number(now()) };
+      }
+      drafts.push({ id: key, ...parsed, updated_at: index[key].updated_at });
+    });
+    Object.keys(index).forEach(key => { if (!seen.has(key)) delete index[key]; });
+    writeIndex(index);
+    return drafts.sort((left, right) =>
+      Number(right.updated_at || 0) - Number(left.updated_at || 0) || left.id.localeCompare(right.id)
+    );
+  }
+
+  function discard(id) {
+    if (typeof id !== 'string' || !parse(id, (() => {
+      try { return storage?.getItem(id); } catch (_error) { return null; }
+    })())) return false;
+    try {
+      storage?.removeItem(id);
+      storage?.removeItem(id + ':operation');
+      const index = readIndex();
+      delete index[id];
+      writeIndex(index);
+      return true;
+    } catch (_error) { return false; }
+  }
+
+  return { list, discard };
+}
+
+if (typeof module !== 'undefined' && module.exports) module.exports = createDraftInbox;

frontend/index.html

@@ -65,6 +65,10 @@ textarea { resize: vertical; min-height: 120px; }
 .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; }
+.draft-card { display:flex; flex-direction:column; gap:8px; min-width:0; }
+.draft-preview { color:var(--muted); overflow-wrap:anywhere; }
+.draft-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+.draft-actions button { min-height:44px; width:100%; }
 .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; }
 .my-work-card-main.review-trigger { width:100%; text-align:left; font:inherit; }
@@ -276,6 +280,7 @@ textarea { resize: vertical; min-height: 120px; }
         <button class="work-filter" data-work-filter="pull" aria-pressed="false">PRs <span data-work-count="pull">0</span></button>
         <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>
+        <button class="work-filter" data-work-filter="draft" aria-pressed="false">Drafts <span data-work-count="draft">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">
@@ -660,6 +665,7 @@ textarea { resize: vertical; min-height: 120px; }
 <script src="static/commands.js"></script>
 <script src="static/search-preview.js"></script>
 <script src="static/widgets.js"></script>
+<script src="static/drafts.js"></script>
 <script src="static/my-work.js"></script>
 <script src="static/pick-work.js"></script>
 <script src="static/conversation.js"></script>
@@ -701,13 +707,14 @@ textarea { resize: vertical; min-height: 120px; }
   let selectedWorkMilestone = 'all';
   try {
     const savedFilter = sessionStorage.getItem(WORK_FILTER_KEY);
-    if (['all', 'issue', 'pull', 'review', 'update'].includes(savedFilter)) selectedWorkFilter = savedFilter;
+    if (['all', 'issue', 'pull', 'review', 'update', 'draft'].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);
   }
   let lastMyWork = [];
+  let lastDrafts = [];
   let lastNotifications = [];
   let lastContextSnapshot = null;
   let notificationPagination = { page: 1, total: 0, has_more: false };
@@ -759,6 +766,7 @@ textarea { resize: vertical; min-height: 120px; }
   const issueController = createIssueSheet({ fetchJson: fetchReviewJson, storage: localStorage });
   const issueCapture = createIssueCapture({ fetchJson: fetchReviewJson, storage: localStorage });
   const pullController = createPullSheet({ fetchJson: fetchReviewJson, storage: localStorage });
+  const draftInbox = createDraftInbox({ storage: localStorage });
   const findWorkController = createFindWork({
     fetchJson: fetchReviewJson,
     onItems: renderAvailableIssues,
@@ -1115,7 +1123,9 @@ textarea { resize: vertical; min-height: 120px; }
   }
 
   function refreshMyWorkView() {
+    lastDrafts = draftInbox.list();
     const counts = countMyWork(lastMyWork);
+    counts.draft = lastDrafts.length;
     Object.entries(counts).forEach(([filter, count]) => {
       const element = qs('[data-work-count="' + filter + '"]');
       if (element) element.textContent = count;
@@ -1150,6 +1160,38 @@ textarea { resize: vertical; min-height: 120px; }
     return [];
   }
 
+  function renderDrafts() {
+    const list = qs('#my-work-list');
+    list.innerHTML = lastDrafts.length ? lastDrafts.map((item, index) =>
+      '<article class="my-work-card draft-card">' +
+      '<span class="small">' + escapeHtml(item.label) + (item.repository ? ' · ' + escapeHtml(item.repository) : '') + '</span>' +
+      '<span class="my-work-card-title">' + escapeHtml(item.title) + '</span>' +
+      '<span class="draft-preview">' + escapeHtml(item.preview || 'Unfinished draft') + '</span>' +
+      '<span class="small">Saved ' + escapeHtml(fmt(item.updated_at)) + '</span>' +
+      '<div class="draft-actions"><button class="draft-resume" data-draft-index="' + index + '" type="button">Resume draft</button>' +
+      '<button class="draft-discard" data-draft-id="' + escAttr(item.id) + '" type="button">Discard draft</button></div></article>'
+    ).join('') : '<div class="muted">No unfinished drafts.</div>';
+    list.querySelectorAll('.draft-resume').forEach(button => {
+      button.addEventListener('click', () => {
+        const item = lastDrafts[Number(button.dataset.draftIndex)];
+        if (!item) return;
+        if (item.kind === 'new-issue') openCreateIssueSheet();
+        else if (item.route) workRoute.open(item.route);
+      });
+    });
+    list.querySelectorAll('.draft-discard').forEach(button => {
+      button.addEventListener('click', () => {
+        if (!window.confirm('Discard this unfinished draft?')) return;
+        draftInbox.discard(button.dataset.draftId);
+        lastDrafts = draftInbox.list();
+        const count = qs('[data-work-count="draft"]');
+        if (count) count.textContent = lastDrafts.length;
+        renderDrafts();
+        qs('#my-work-action-status').textContent = 'Draft discarded.';
+      });
+    });
+  }
+
   function updateWorkPaginationControls() {
     const labels = { issue: 'issues', pull: 'pull requests', review: 'review requests' };
     const streams = activeWorkStreams();
@@ -1166,6 +1208,15 @@ textarea { resize: vertical; min-height: 120px; }
   }
 
   function renderMyWork() {
+    lastDrafts = draftInbox.list();
+    const draftCount = qs('[data-work-count="draft"]');
+    if (draftCount) draftCount.textContent = lastDrafts.length;
+    if (selectedWorkFilter === 'draft') {
+      renderDrafts();
+      qs('#bulk-mark-read-bar').hidden = true;
+      qs('#load-more-notifications').hidden = true;
+      return;
+    }
     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 => {
@@ -1663,13 +1714,14 @@ textarea { resize: vertical; min-height: 120px; }
 
   function openCreateIssueSheet() {
     const captureDraft = issueCapture.loadDraft();
-    const repositories = lastContextSnapshot?.repos || [];
-    qs('#create-issue-repository').innerHTML = repositories.map(repository =>
-      '<option value="' + escAttr(repository.full_name) + '">' + escapeHtml(repository.full_name) + '</option>'
-    ).join('');
-    if (repositories.some(repository => repository.full_name === captureDraft.repository)) {
-      qs('#create-issue-repository').value = captureDraft.repository;
+    const repositories = (lastContextSnapshot?.repos || []).map(repository => repository.full_name).filter(Boolean);
+    if (captureDraft.repository && !repositories.includes(captureDraft.repository)) {
+      repositories.unshift(captureDraft.repository);
     }
+    qs('#create-issue-repository').innerHTML = repositories.map(repository =>
+      '<option value="' + escAttr(repository) + '">' + escapeHtml(repository) + '</option>'
+    ).join('');
+    if (captureDraft.repository) qs('#create-issue-repository').value = captureDraft.repository;
     qs('#create-issue-title').value = captureDraft.title;
     qs('#create-issue-body').value = captureDraft.body;
     loadIssueLabels(qs('#create-issue-repository').value, captureDraft.labelIds);