paperclip-github-plugin 0.2.2 → 0.2.3

package/dist/ui/index.js

@@ -680,12 +680,18 @@ function getActiveRateLimitPause(syncState, referenceTimeMs = Date.now()) {
     ...syncState.errorDetails.rateLimitResource ? { resource: syncState.errorDetails.rateLimitResource } : {}
   };
 }
+function isSyncCancellationRequested(syncState) {
+  return syncState.status === "running" && Boolean(syncState.cancelRequestedAt?.trim());
+}
 function getSyncToastTitle(syncState) {
   if (getActiveRateLimitPause(syncState)) {
     return "GitHub sync is paused";
   }
+  if (syncState.status === "cancelled") {
+    return "GitHub sync was cancelled";
+  }
   if (syncState.status === "running") {
-    return "GitHub sync is running";
+    return isSyncCancellationRequested(syncState) ? "GitHub sync is stopping" : "GitHub sync is running";
   }
   return syncState.status === "error" ? "GitHub sync needs attention" : "GitHub sync finished";
 }
@@ -694,7 +700,7 @@ function getSyncToastBody(syncState) {
     return syncState.message.trim();
   }
   if (syncState.status === "running") {
-    return "GitHub sync is running in the background.";
+    return isSyncCancellationRequested(syncState) ? "Cancellation requested. GitHub sync will stop after the current step finishes." : "GitHub sync is running in the background.";
   }
   return "GitHub sync completed.";
 }
@@ -702,7 +708,7 @@ function getSyncToastTone(syncState) {
   if (getActiveRateLimitPause(syncState)) {
     return "info";
   }
-  if (syncState.status === "running") {
+  if (syncState.status === "running" || syncState.status === "cancelled") {
     return "info";
   }
   return syncState.status === "error" ? "error" : "success";
@@ -833,6 +839,10 @@ var SHARED_PROGRESS_STYLES = `
     align-items: stretch;
     flex-direction: column;
   }
+
+  .ghsync-diagnostics__layout--split {
+    grid-template-columns: 1fr;
+  }
 }
 `;
 var PAGE_STYLES = `
@@ -1060,6 +1070,79 @@ var PAGE_STYLES = `
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 }
 
+.ghsync-diagnostics__layout {
+  display: grid;
+  gap: 10px;
+}
+
+.ghsync-diagnostics__layout--split {
+  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.ghsync-diagnostics__detail,
+.ghsync-diagnostics__failures {
+  display: grid;
+  gap: 10px;
+}
+
+.ghsync-diagnostics__failures {
+  max-height: 420px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ghsync-diagnostics__failure {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--ghsync-dangerBorder);
+  background: var(--ghsync-surfaceAlt);
+  text-align: left;
+  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+}
+
+.ghsync-diagnostics__failure-item {
+  list-style: none;
+}
+
+.ghsync-diagnostics__failure:hover {
+  border-color: var(--ghsync-dangerText);
+  transform: translateY(-1px);
+}
+
+.ghsync-diagnostics__failure--active {
+  border-color: var(--ghsync-dangerText);
+  background: color-mix(in srgb, var(--ghsync-dangerBg) 35%, var(--ghsync-surfaceAlt));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ghsync-dangerText) 22%, transparent);
+}
+
+.ghsync-diagnostics__failure-title {
+  color: var(--ghsync-title);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.ghsync-diagnostics__failure-meta {
+  color: var(--ghsync-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.ghsync-diagnostics__failure-preview {
+  color: var(--ghsync-text);
+  font-size: 12px;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
 .ghsync-diagnostics__item,
 .ghsync-diagnostics__block {
   display: grid;
@@ -2033,6 +2116,72 @@ var WIDGET_STYLES = `
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 }
 
+.ghsync-diagnostics__layout {
+  display: grid;
+  gap: 10px;
+}
+
+.ghsync-diagnostics__layout--split {
+  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.ghsync-diagnostics__detail,
+.ghsync-diagnostics__failures {
+  display: grid;
+  gap: 10px;
+}
+
+.ghsync-diagnostics__failures {
+  max-height: 320px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ghsync-diagnostics__failure {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid var(--ghsync-dangerBorder);
+  background: var(--ghsync-surfaceAlt);
+  text-align: left;
+}
+
+.ghsync-diagnostics__failure-item {
+  list-style: none;
+}
+
+.ghsync-diagnostics__failure--active {
+  border-color: var(--ghsync-dangerText);
+  background: color-mix(in srgb, var(--ghsync-dangerBg) 35%, var(--ghsync-surfaceAlt));
+}
+
+.ghsync-diagnostics__failure-title {
+  color: var(--ghsync-title);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.ghsync-diagnostics__failure-meta {
+  color: var(--ghsync-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.ghsync-diagnostics__failure-preview {
+  color: var(--ghsync-text);
+  font-size: 12px;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
 .ghsync-diagnostics__item,
 .ghsync-diagnostics__block {
   display: grid;
@@ -2173,6 +2322,10 @@ var WIDGET_STYLES = `
   .ghsync-widget__link {
     flex: 1 1 auto;
   }
+
+  .ghsync-diagnostics__layout--split {
+    grid-template-columns: 1fr;
+  }
 }
 
 ${SHARED_PROGRESS_STYLES}
@@ -3079,7 +3232,10 @@ function getSyncStatus(syncState, runningSync, syncUnlocked) {
     return { label: "Locked", tone: "neutral" };
   }
   if (runningSync || syncState.status === "running") {
-    return { label: "Running", tone: "info" };
+    return {
+      label: isSyncCancellationRequested(syncState) ? "Cancelling" : "Running",
+      tone: "info"
+    };
   }
   if (getActiveRateLimitPause(syncState)) {
     return { label: "Paused", tone: "warning" };
@@ -3090,6 +3246,9 @@ function getSyncStatus(syncState, runningSync, syncUnlocked) {
   if (syncState.status === "success") {
     return { label: "Ready", tone: "success" };
   }
+  if (syncState.status === "cancelled") {
+    return { label: "Cancelled", tone: "neutral" };
+  }
   return { label: "Ready", tone: "info" };
 }
 function getToneClass(tone) {
@@ -3360,10 +3519,10 @@ function getDashboardSummary(params) {
   if (params.runningSync || params.syncState.status === "running") {
     const progress = getRunningSyncProgressModel(params.syncState);
     return {
-      label: "Syncing",
+      label: isSyncCancellationRequested(params.syncState) ? "Cancelling" : "Syncing",
       tone: "info",
-      title: progress?.title ?? "Sync in progress",
-      body: progress?.description ?? "GitHub issues are being checked right now. This card refreshes automatically until the run finishes."
+      title: isSyncCancellationRequested(params.syncState) ? "Stopping the current sync" : progress?.title ?? "Sync in progress",
+      body: isSyncCancellationRequested(params.syncState) ? "GitHub Sync will stop after the current repository or issue step finishes." : progress?.description ?? "GitHub issues are being checked right now. This card refreshes automatically until the run finishes."
     };
   }
   if (activeRateLimitPause) {
@@ -3382,6 +3541,14 @@ function getDashboardSummary(params) {
       body: params.syncState.message ?? "Open settings to review the latest GitHub sync issue."
     };
   }
+  if (params.syncState.status === "cancelled") {
+    return {
+      label: "Cancelled",
+      tone: "neutral",
+      title: "Sync cancelled",
+      body: params.syncState.message ?? "The last GitHub sync was cancelled before it finished."
+    };
+  }
   if (params.syncState.checkedAt) {
     return {
       label: "Ready",
@@ -3491,16 +3658,28 @@ function formatSyncFailureRepository(repositoryUrl) {
   }
   return repositoryUrl.trim();
 }
-function getSyncDiagnostics(syncState) {
+function getSyncFailureLogEntries(syncState) {
+  if (syncState.recentFailures?.length) {
+    return syncState.recentFailures.filter((entry) => typeof entry.message === "string" && entry.message.trim());
+  }
   if (syncState.status !== "error") {
-    return null;
+    return [];
   }
+  return [
+    {
+      message: syncState.message?.trim() || "GitHub sync failed.",
+      occurredAt: syncState.checkedAt,
+      ...syncState.errorDetails ?? {}
+    }
+  ];
+}
+function getSyncDiagnostics(entry) {
   const rows = [];
-  const repositoryLabel = formatSyncFailureRepository(syncState.errorDetails?.repositoryUrl);
-  const phaseLabel = formatSyncFailurePhase(syncState.errorDetails?.phase);
-  const issueNumber = syncState.errorDetails?.githubIssueNumber;
-  const rateLimitResetAt = syncState.errorDetails?.rateLimitResetAt;
-  const rateLimitResourceLabel = getGitHubRateLimitResourceLabel(syncState.errorDetails?.rateLimitResource);
+  const repositoryLabel = formatSyncFailureRepository(entry.repositoryUrl);
+  const phaseLabel = formatSyncFailurePhase(entry.phase);
+  const issueNumber = entry.githubIssueNumber;
+  const rateLimitResetAt = entry.rateLimitResetAt;
+  const rateLimitResourceLabel = getGitHubRateLimitResourceLabel(entry.rateLimitResource);
   if (repositoryLabel) {
     rows.push({
       label: "Repository",
@@ -3531,12 +3710,19 @@ function getSyncDiagnostics(syncState) {
       value: formatDate(rateLimitResetAt, rateLimitResetAt)
     });
   }
-  const rawMessage = syncState.errorDetails?.rawMessage && syncState.errorDetails.rawMessage !== syncState.message ? syncState.errorDetails.rawMessage : void 0;
-  const suggestedAction = syncState.errorDetails?.suggestedAction;
-  if (rows.length === 0 && !rawMessage && !suggestedAction) {
+  if (entry.occurredAt) {
+    rows.push({
+      label: "Captured",
+      value: formatDate(entry.occurredAt, entry.occurredAt)
+    });
+  }
+  const rawMessage = entry.rawMessage && entry.rawMessage !== entry.message ? entry.rawMessage : void 0;
+  const suggestedAction = entry.suggestedAction;
+  if (!entry.message && rows.length === 0 && !rawMessage && !suggestedAction) {
     return null;
   }
   return {
+    message: entry.message,
     rows,
     ...rawMessage ? { rawMessage } : {},
     ...suggestedAction ? { suggestedAction } : {}
@@ -3590,31 +3776,76 @@ function SyncProgressPanel(props) {
   );
 }
 function SyncDiagnosticsPanel(props) {
-  const diagnostics = getSyncDiagnostics(props.syncState);
+  const failureEntries = getSyncFailureLogEntries(props.syncState);
+  const latestFailureIndex = Math.max(failureEntries.length - 1, 0);
+  const [selectedFailureIndex, setSelectedFailureIndex] = useState(latestFailureIndex);
+  const selectedFailure = failureEntries[Math.min(selectedFailureIndex, latestFailureIndex)];
+  const diagnostics = selectedFailure ? getSyncDiagnostics(selectedFailure) : null;
   const requestError = props.requestError?.trim() ? props.requestError.trim() : null;
+  const canSelectFailures = !props.compact && failureEntries.length > 1;
+  const savedFailureCount = props.syncState.erroredIssuesCount ?? failureEntries.length;
+  useEffect(() => {
+    setSelectedFailureIndex(latestFailureIndex);
+  }, [latestFailureIndex, props.syncState.checkedAt, props.syncState.status]);
   if (!diagnostics && !requestError) {
     return null;
   }
   return /* @__PURE__ */ jsxs("section", { className: `ghsync-diagnostics${props.compact ? " ghsync-diagnostics--compact" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__header", children: [
       /* @__PURE__ */ jsx("strong", { children: diagnostics ? "Troubleshooting details" : "Sync request failed" }),
-      /* @__PURE__ */ jsx("span", { children: diagnostics ? "GitHub Sync saved this snapshot from the latest failed run." : "The sync request failed before the worker returned a saved result." })
+      /* @__PURE__ */ jsx("span", { children: diagnostics ? canSelectFailures ? savedFailureCount > failureEntries.length ? `GitHub Sync saved the latest ${failureEntries.length} of ${savedFailureCount} failures from the latest run. Select one to inspect.` : `GitHub Sync saved ${failureEntries.length} failure${failureEntries.length === 1 ? "" : "s"} from the latest run. Select one to inspect.` : "GitHub Sync saved this snapshot from the latest failed run." : "The sync request failed before the worker returned a saved result." })
     ] }),
     requestError ? /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__block", children: [
       /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: "Request error" }),
       /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__value ghsync-diagnostics__value--code", children: requestError })
     ] }) : null,
-    diagnostics?.rows.length ? /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__grid", children: diagnostics.rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__item", children: [
-      /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: row.label }),
-      /* @__PURE__ */ jsx("strong", { className: "ghsync-diagnostics__value", children: row.value })
-    ] }, row.label)) }) : null,
-    diagnostics?.rawMessage ? /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__block", children: [
-      /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: "Raw error" }),
-      /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__value ghsync-diagnostics__value--code", children: diagnostics.rawMessage })
-    ] }) : null,
-    diagnostics?.suggestedAction ? /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__block", children: [
-      /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: "Next step" }),
-      /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__value", children: diagnostics.suggestedAction })
+    diagnostics ? /* @__PURE__ */ jsxs("div", { className: `ghsync-diagnostics__layout${canSelectFailures ? " ghsync-diagnostics__layout--split" : ""}`, children: [
+      canSelectFailures ? /* @__PURE__ */ jsx("ul", { className: "ghsync-diagnostics__failures", "aria-label": "Latest sync failures", children: failureEntries.map((failure, index) => {
+        const repositoryLabel = formatSyncFailureRepository(failure.repositoryUrl);
+        const issueLabel = failure.githubIssueNumber !== void 0 ? `Issue #${failure.githubIssueNumber}` : null;
+        const phaseLabel = formatSyncFailurePhase(failure.phase);
+        const title = [repositoryLabel, issueLabel].filter((value) => Boolean(value)).join(" \xB7 ");
+        const meta = [phaseLabel, failure.occurredAt ? formatDate(failure.occurredAt, failure.occurredAt) : null].filter((value) => Boolean(value)).join(" \xB7 ");
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "ghsync-diagnostics__failure-item",
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `ghsync-diagnostics__failure${index === selectedFailureIndex ? " ghsync-diagnostics__failure--active" : ""}`,
+                "aria-pressed": index === selectedFailureIndex,
+                onClick: () => setSelectedFailureIndex(index),
+                children: [
+                  /* @__PURE__ */ jsx("strong", { className: "ghsync-diagnostics__failure-title", children: title || `Failure ${index + 1}` }),
+                  meta ? /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__failure-meta", children: meta }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__failure-preview", children: failure.message })
+                ]
+              }
+            )
+          },
+          `${failure.occurredAt ?? "unknown"}-${failure.githubIssueNumber ?? "no-issue"}-${index}`
+        );
+      }) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__detail", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__block", children: [
+          /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: "Summary" }),
+          /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__value", children: diagnostics.message })
+        ] }),
+        diagnostics.rows.length ? /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__grid", children: diagnostics.rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__item", children: [
+          /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: row.label }),
+          /* @__PURE__ */ jsx("strong", { className: "ghsync-diagnostics__value", children: row.value })
+        ] }, row.label)) }) : null,
+        diagnostics.rawMessage ? /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__block", children: [
+          /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: "Raw error" }),
+          /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__value ghsync-diagnostics__value--code", children: diagnostics.rawMessage })
+        ] }) : null,
+        diagnostics.suggestedAction ? /* @__PURE__ */ jsxs("div", { className: "ghsync-diagnostics__block", children: [
+          /* @__PURE__ */ jsx("span", { className: "ghsync-diagnostics__label", children: "Next step" }),
+          /* @__PURE__ */ jsx("div", { className: "ghsync-diagnostics__value", children: diagnostics.suggestedAction })
+        ] }) : null
+      ] })
     ] }) : null
   ] });
 }
@@ -3630,11 +3861,13 @@ function GitHubSyncSettingsPage() {
   const updateBoardAccess = usePluginAction("settings.updateBoardAccess");
   const validateToken = usePluginAction("settings.validateToken");
   const runSyncNow = usePluginAction("sync.runNow");
+  const cancelSync = usePluginAction("sync.cancel");
   const [form, setForm] = useState(EMPTY_SETTINGS);
   const [submittingToken, setSubmittingToken] = useState(false);
   const [connectingBoardAccess, setConnectingBoardAccess] = useState(false);
   const [submittingSetup, setSubmittingSetup] = useState(false);
   const [runningSync, setRunningSync] = useState(false);
+  const [cancellingSync, setCancellingSync] = useState(false);
   const [manualSyncRequestError, setManualSyncRequestError] = useState(null);
   const [scheduleFrequencyDraft, setScheduleFrequencyDraft] = useState(String(DEFAULT_SCHEDULE_FREQUENCY_MINUTES));
   const [ignoredAuthorsDraft, setIgnoredAuthorsDraft] = useState(DEFAULT_ADVANCED_SETTINGS.ignoredIssueAuthorUsernames.join(", "));
@@ -3897,6 +4130,10 @@ function GitHubSyncSettingsPage() {
     hasMappings: savedMappingCount > 0,
     hasBoardAccess: boardAccessReady
   });
+  const syncPersistedRunning = displaySyncState.status === "running";
+  const syncStartPending = runningSync && !syncPersistedRunning;
+  const syncInFlight = syncStartPending || syncPersistedRunning;
+  const cancellationRequested = syncPersistedRunning && (cancellingSync || isSyncCancellationRequested(displaySyncState));
   const mappingsDirty = JSON.stringify(draftMappings) !== JSON.stringify(savedMappings);
   const advancedSettingsDirty = JSON.stringify(draftAdvancedSettings) !== JSON.stringify(savedAdvancedSettings);
   const scheduleFrequencyError = getScheduleFrequencyError(scheduleFrequencyDraft);
@@ -3904,7 +4141,6 @@ function GitHubSyncSettingsPage() {
   const savedScheduleFrequencyMinutes = normalizeScheduleFrequencyMinutes(currentSettings?.scheduleFrequencyMinutes);
   const scheduleDirty = scheduleFrequencyError === null && scheduleFrequencyMinutes !== savedScheduleFrequencyMinutes;
   const mappings = form.mappings.length > 0 ? form.mappings : [createEmptyMapping(0)];
-  const syncInFlight = runningSync || displaySyncState.status === "running";
   const settingsMutationsLocked = syncInFlight;
   const settingsMutationsLockReason = settingsMutationsLocked ? "Settings are temporarily locked while a sync is running to avoid overwriting local edits." : null;
   const syncStatus = getSyncStatus(displaySyncState, runningSync, syncUnlocked);
@@ -3926,10 +4162,11 @@ function GitHubSyncSettingsPage() {
     savedMappingCount
   });
   const syncSectionDescription = "";
-  const syncSummaryPrimaryText = syncProgress?.title ?? displaySyncState.message ?? (syncUnlocked ? "Ready to sync." : syncSetupMessage);
+  const syncSummaryPrimaryText = (cancellationRequested ? "Cancellation requested." : void 0) ?? syncProgress?.title ?? displaySyncState.message ?? (syncUnlocked ? "Ready to sync." : syncSetupMessage);
   const manualSyncScopeSummary = hasCompanyContext ? `Manual sync: ${currentCompanyName}` : "Manual sync: all companies";
   const syncSummarySecondaryText = syncProgress ? [
     manualSyncScopeSummary,
+    cancellationRequested ? "Stopping after the current step" : null,
     syncProgress.issueProgressLabel,
     syncProgress.currentIssueLabel ?? syncProgress.repositoryPosition,
     `Auto-sync: ${scheduleDescription}`
@@ -4298,6 +4535,46 @@ function GitHubSyncSettingsPage() {
       setRunningSync(false);
     }
   }
+  async function handleCancelSync() {
+    if (!syncPersistedRunning) {
+      return;
+    }
+    setCancellingSync(true);
+    setManualSyncRequestError(null);
+    try {
+      const result = await cancelSync();
+      setForm((current) => ({
+        ...current,
+        syncState: result.syncState
+      }));
+      toast({
+        title: getSyncToastTitle(result.syncState),
+        body: getSyncToastBody(result.syncState),
+        tone: getSyncToastTone(result.syncState)
+      });
+      armSyncCompletionToast(result.syncState);
+      try {
+        await settings.refresh();
+      } catch {
+        return;
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to cancel sync.";
+      setManualSyncRequestError(message);
+      toast({
+        title: "Unable to cancel GitHub sync",
+        body: message,
+        tone: "error"
+      });
+      try {
+        await settings.refresh();
+      } catch {
+        return;
+      }
+    } finally {
+      setCancellingSync(false);
+    }
+  }
   return /* @__PURE__ */ jsxs("div", { className: "ghsync", style: themeVars, children: [
     /* @__PURE__ */ jsx("style", { children: PAGE_STYLES }),
     /* @__PURE__ */ jsxs("section", { className: "ghsync__header", children: [
@@ -4752,10 +5029,10 @@ function GitHubSyncSettingsPage() {
                   "button",
                   {
                     type: "button",
-                    className: getPluginActionClassName({ variant: "primary" }),
-                    onClick: handleRunSyncNow,
-                    disabled: syncInFlight || showInitialLoadingState,
-                    children: syncInFlight ? "Running\u2026" : manualSyncButtonLabel
+                    className: getPluginActionClassName({ variant: syncPersistedRunning ? "danger" : "primary" }),
+                    onClick: syncPersistedRunning ? handleCancelSync : handleRunSyncNow,
+                    disabled: showInitialLoadingState || syncStartPending || (syncPersistedRunning ? cancellationRequested : false),
+                    children: syncPersistedRunning ? cancellationRequested ? "Cancelling\u2026" : "Cancel sync" : syncStartPending ? "Running\u2026" : manualSyncButtonLabel
                   }
                 )
               ] })
@@ -4841,7 +5118,9 @@ function GitHubSyncDashboardWidget() {
     hostContext.companyId ? { companyId: hostContext.companyId } : {}
   );
   const runSyncNow = usePluginAction("sync.runNow");
+  const cancelSync = usePluginAction("sync.cancel");
   const [runningSync, setRunningSync] = useState(false);
+  const [cancellingSync, setCancellingSync] = useState(false);
   const [manualSyncRequestError, setManualSyncRequestError] = useState(null);
   const [settingsHref, setSettingsHref] = useState(SETTINGS_INDEX_HREF2);
   const [cachedSettings, setCachedSettings] = useState(null);
@@ -4872,7 +5151,10 @@ function GitHubSyncDashboardWidget() {
     hasBoardAccess: boardAccessReady
   });
   const syncUnlocked = syncSetupIssue === null;
-  const syncInFlight = runningSync || displaySyncState.status === "running";
+  const syncPersistedRunning = displaySyncState.status === "running";
+  const syncStartPending = runningSync && !syncPersistedRunning;
+  const syncInFlight = syncStartPending || syncPersistedRunning;
+  const cancellationRequested = syncPersistedRunning && (cancellingSync || isSyncCancellationRequested(displaySyncState));
   const scheduleFrequencyMinutes = normalizeScheduleFrequencyMinutes(current.scheduleFrequencyMinutes);
   const scheduleDescription = formatScheduleFrequency(scheduleFrequencyMinutes);
   const summary = getDashboardSummary({
@@ -4972,6 +5254,34 @@ function GitHubSyncDashboardWidget() {
       setRunningSync(false);
     }
   }
+  async function handleCancelSync() {
+    if (!syncPersistedRunning) {
+      return;
+    }
+    setCancellingSync(true);
+    setManualSyncRequestError(null);
+    try {
+      const result = await cancelSync();
+      const nextSyncState = result.syncState ?? EMPTY_SETTINGS.syncState;
+      toast({
+        title: getSyncToastTitle(nextSyncState),
+        body: getSyncToastBody(nextSyncState),
+        tone: getSyncToastTone(nextSyncState)
+      });
+      armSyncCompletionToast(nextSyncState);
+      await settings.refresh();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to cancel GitHub sync.";
+      setManualSyncRequestError(message);
+      toast({
+        title: "Unable to cancel GitHub sync",
+        body: message,
+        tone: "error"
+      });
+    } finally {
+      setCancellingSync(false);
+    }
+  }
   return /* @__PURE__ */ jsxs("section", { className: "ghsync-widget", style: themeVars, children: [
     /* @__PURE__ */ jsx("style", { children: WIDGET_STYLES }),
     /* @__PURE__ */ jsxs("div", { className: "ghsync-widget__card", children: [
@@ -5054,10 +5364,10 @@ function GitHubSyncDashboardWidget() {
           "button",
           {
             type: "button",
-            className: getPluginActionClassName({ variant: "primary" }),
-            onClick: handleRunSync,
-            disabled: syncInFlight || showInitialLoadingState,
-            children: syncInFlight ? "Running\u2026" : "Run sync now"
+            className: getPluginActionClassName({ variant: syncPersistedRunning ? "danger" : "primary" }),
+            onClick: syncPersistedRunning ? handleCancelSync : handleRunSync,
+            disabled: showInitialLoadingState || syncStartPending || (syncPersistedRunning ? cancellationRequested : false),
+            children: syncPersistedRunning ? cancellationRequested ? "Cancelling\u2026" : "Cancel sync" : syncStartPending ? "Running\u2026" : "Run sync now"
           }
         ) : null
       ] }) })
@@ -5085,6 +5395,7 @@ function GitHubMarkIcon(props) {
 function GitHubSyncToolbarButtonSurface(props) {
   const toast = usePluginToast();
   const runSyncNow = usePluginAction("sync.runNow");
+  const cancelSync = usePluginAction("sync.cancel");
   const pluginIdFromLocation = getPluginIdFromLocation();
   const surfaceRef = useRef(null);
   const resolvedIssue = useResolvedIssueId({
@@ -5104,6 +5415,7 @@ function GitHubSyncToolbarButtonSurface(props) {
     props.companyId ? { companyId: props.companyId } : {}
   );
   const [runningSync, setRunningSync] = useState(false);
+  const [cancellingSync, setCancellingSync] = useState(false);
   const themeMode = useResolvedThemeMode();
   const boardAccessRequirement = usePaperclipBoardAccessRequirement();
   const theme = themeMode === "light" ? LIGHT_PALETTE : DARK_PALETTE;
@@ -5123,7 +5435,10 @@ function GitHubSyncToolbarButtonSurface(props) {
   const effectiveCanRun = state.canRun && !boardAccessSetupIssue;
   const effectiveMessage = boardAccessSetupIssue ? getSyncSetupMessage(boardAccessSetupIssue, hasCompanyContext) : state.message;
   const effectiveLabel = boardAccessSetupIssue ? "Board access required" : state.label;
-  const syncInFlight = runningSync || state.syncState.status === "running";
+  const syncPersistedRunning = state.syncState.status === "running";
+  const syncStartPending = runningSync && !syncPersistedRunning;
+  const syncInFlight = syncStartPending || syncPersistedRunning;
+  const cancellationRequested = syncPersistedRunning && (cancellingSync || isSyncCancellationRequested(state.syncState));
   const armSyncCompletionToast = useSyncCompletionToast(state.syncState, toast);
   useEffect(() => {
     if (state.syncState.status !== "running") {
@@ -5228,6 +5543,31 @@ function GitHubSyncToolbarButtonSurface(props) {
       setRunningSync(false);
     }
   }
+  async function handleCancelSync() {
+    if (!syncPersistedRunning) {
+      return;
+    }
+    try {
+      setCancellingSync(true);
+      const result = await cancelSync();
+      const nextSyncState = result.syncState ?? EMPTY_SETTINGS.syncState;
+      toast({
+        title: getSyncToastTitle(nextSyncState),
+        body: getSyncToastBody(nextSyncState),
+        tone: getSyncToastTone(nextSyncState)
+      });
+      armSyncCompletionToast(nextSyncState);
+      toolbarState.refresh();
+    } catch (error) {
+      toast({
+        title: "Unable to cancel GitHub sync",
+        body: error instanceof Error ? error.message : "Unable to cancel GitHub sync.",
+        tone: "error"
+      });
+    } finally {
+      setCancellingSync(false);
+    }
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5245,11 +5585,11 @@ function GitHubSyncToolbarButtonSurface(props) {
             "data-variant": "outline",
             "data-size": "sm",
             className: props.entityType ? HOST_ENTITY_BUTTON_CLASSNAME : HOST_GLOBAL_BUTTON_CLASSNAME,
-            disabled: !effectiveCanRun || syncInFlight || toolbarState.loading,
-            onClick: handleRunSync,
+            disabled: toolbarState.loading || syncStartPending || (syncPersistedRunning ? cancellationRequested : !effectiveCanRun),
+            onClick: syncPersistedRunning ? handleCancelSync : handleRunSync,
             children: [
               /* @__PURE__ */ jsx(GitHubMarkIcon, { className: "mr-1.5 h-3.5 w-3.5" }),
-              /* @__PURE__ */ jsx("span", { children: syncInFlight ? "Syncing\u2026" : effectiveLabel })
+              /* @__PURE__ */ jsx("span", { children: syncPersistedRunning ? cancellationRequested ? "Cancelling\u2026" : "Cancel sync" : syncStartPending ? "Syncing\u2026" : effectiveLabel })
             ]
           }
         )