paperclip-github-plugin 0.5.3 → 0.6.1

package/dist/ui/index.js

@@ -22995,6 +22995,28 @@ var EMPTY_SETTINGS = {
   advancedSettings: DEFAULT_ADVANCED_SETTINGS,
   availableAssignees: []
 };
+var EMPTY_DASHBOARD_METRICS = {
+  status: "company_required",
+  historyWindowDays: 14,
+  comparisonWindowDays: 30,
+  backlog: {
+    history: []
+  },
+  githubIssuesClosed: {
+    currentPeriodCount: 0,
+    previousPeriodCount: 0,
+    history: []
+  },
+  paperclipPullRequestsCreated: {
+    currentPeriodCount: 0,
+    previousPeriodCount: 0,
+    history: []
+  },
+  notes: {
+    backlogHistoryAvailable: false,
+    activityHistoryAvailable: false
+  }
+};
 function createIdleSyncState() {
   return {
     status: "idle"
@@ -26142,7 +26164,7 @@ var WIDGET_STYLES = `
 .ghsync-widget__stats {
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   border-top: 1px solid var(--ghsync-border-soft);
   padding-top: 14px;
 }
@@ -26155,39 +26177,117 @@ var WIDGET_STYLES = `
 
 .ghsync-widget__stat {
   display: grid;
-  gap: 6px;
-  padding: 12px;
+  gap: 10px;
+  padding: 14px;
   border: 1px solid var(--ghsync-border-soft);
   border-radius: 10px;
   background: var(--ghsync-surfaceAlt);
 }
 
-.ghsync-widget__stat--emphasized {
-  border-color: var(--ghsync-danger-border);
-  background: var(--ghsync-dangerBg);
+.ghsync-widget__stat--success {
+  border-color: var(--ghsync-success-border);
+}
+
+.ghsync-widget__stat--warning {
+  border-color: var(--ghsync-warning-border);
 }
 
-.ghsync-widget__stat span {
+.ghsync-widget__stat--info {
+  border-color: var(--ghsync-info-border);
+}
+
+.ghsync-widget__stat-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ghsync-widget__stat-value {
+  display: grid;
+  gap: 6px;
+}
+
+.ghsync-widget__stat-label {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--ghsync-title);
 }
 
-.ghsync-widget__stat strong {
+.ghsync-widget__stat-value strong {
   display: block;
   font-size: 24px;
   line-height: 1;
   color: var(--ghsync-title);
 }
 
-.ghsync-widget__stat p {
+.ghsync-widget__stat-change {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--ghsync-muted);
+}
+
+.ghsync-widget__stat-change--success {
+  color: var(--ghsync-success-text);
+}
+
+.ghsync-widget__stat-change--warning {
+  color: var(--ghsync-warning-text);
+}
+
+.ghsync-widget__stat-change--info {
+  color: var(--ghsync-info-text);
+}
+
+.ghsync-widget__stat-note {
   margin: 0;
   color: var(--ghsync-muted);
   font-size: 11px;
   line-height: 1.5;
 }
 
+.ghsync-widget__trend {
+  color: var(--ghsync-muted);
+}
+
+.ghsync-widget__trend svg {
+  display: block;
+  width: 100%;
+  height: 32px;
+}
+
+.ghsync-widget__trend--success {
+  color: var(--ghsync-success-text);
+}
+
+.ghsync-widget__trend--warning {
+  color: var(--ghsync-warning-text);
+}
+
+.ghsync-widget__trend--info {
+  color: var(--ghsync-info-text);
+}
+
+.ghsync-widget__trend-line {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ghsync-widget__trend-area {
+  fill: currentColor;
+  opacity: 0.12;
+}
+
+.ghsync-widget__trend-bar {
+  fill: currentColor;
+  opacity: 0.9;
+}
+
 .ghsync-widget__summary {
   display: grid;
   gap: 4px;
@@ -26430,7 +26530,6 @@ var WIDGET_STYLES = `
 @media (max-width: 720px) {
   .ghsync-widget__stats {
     grid-template-columns: minmax(0, 1fr);
-    gap: 12px;
   }
 
   .ghsync-widget__top,
@@ -26439,11 +26538,6 @@ var WIDGET_STYLES = `
     align-items: stretch;
   }
 
-  .ghsync-widget__stat {
-    padding-left: 0;
-    border-left: 0;
-  }
-
   .ghsync-widget__button-row {
     width: 100%;
   }
@@ -28681,6 +28775,68 @@ function getSyncMetricCards(params) {
     }
   ];
 }
+function getSyncMetricCardTone(card) {
+  if (card.key === "errored") {
+    return card.emphasized ? "warning" : "success";
+  }
+  return card.value > 0 ? "success" : "info";
+}
+function getKpiDashboardSummary(params) {
+  if (!params.hasCompanyContext) {
+    return {
+      label: "Company required",
+      tone: "warning",
+      title: "Open a company dashboard",
+      body: "Compare backlog, issue closure, and Paperclip PR creation over time."
+    };
+  }
+  if (params.syncIssue === "missing_token") {
+    return {
+      label: "Setup required",
+      tone: "warning",
+      title: "Finish setup",
+      body: "Save a GitHub token to start KPI tracking."
+    };
+  }
+  if (params.syncIssue === "missing_board_access") {
+    return {
+      label: "Board access required",
+      tone: "warning",
+      title: "Connect Paperclip board access",
+      body: "This deployment needs board access before KPI history can refresh."
+    };
+  }
+  if (params.metrics.status === "no_mappings") {
+    return {
+      label: "Setup required",
+      tone: "warning",
+      title: "Map a repository",
+      body: "Add at least one repository, then run a full sync."
+    };
+  }
+  if (params.syncState.status === "running") {
+    return {
+      label: "Syncing",
+      tone: "info",
+      title: "KPI history is updating",
+      body: "Backlog and activity history refresh during sync."
+    };
+  }
+  if (!params.metrics.notes.backlogHistoryAvailable && !params.metrics.notes.activityHistoryAvailable) {
+    return {
+      label: "Waiting on first sync",
+      tone: "info",
+      title: "Run the first full sync",
+      body: "The first sync seeds backlog and issue history."
+    };
+  }
+  return {
+    label: "Ready",
+    tone: params.syncState.status === "success" ? "success" : "info",
+    title: "Company delivery KPIs",
+    body: "Track backlog, issue closure, and Paperclip PR creation against recent history."
+  };
+}
 function getDashboardSummary(params) {
   const cadence = formatScheduleFrequency(params.scheduleFrequencyMinutes);
   const activeRateLimitPause = getActiveRateLimitPause(params.syncState);
@@ -28756,6 +28912,157 @@ function getDashboardSummary(params) {
     body: `Your repository mapping is in place. Automatic sync runs ${cadence}.`
   };
 }
+function formatWidgetMetricValue(value) {
+  return typeof value === "number" ? String(value) : "\u2014";
+}
+function getPeriodDeltaTone(current, previous3) {
+  if (current > previous3) {
+    return "success";
+  }
+  if (current < previous3) {
+    return "warning";
+  }
+  return "neutral";
+}
+function getBacklogDeltaTone(current, previous3) {
+  if (current < previous3) {
+    return "success";
+  }
+  if (current > previous3) {
+    return "warning";
+  }
+  return "neutral";
+}
+function describePeriodChange(current, previous3, comparisonWindowDays) {
+  if (current > previous3) {
+    return `+${current - previous3} vs previous ${comparisonWindowDays} days`;
+  }
+  if (current < previous3) {
+    return `-${previous3 - current} vs previous ${comparisonWindowDays} days`;
+  }
+  return `No change vs previous ${comparisonWindowDays} days`;
+}
+function describeBacklogChange(current, previous3, comparisonWindowDays) {
+  if (current === void 0 || previous3 === void 0) {
+    return "Need more sync history to compare backlog.";
+  }
+  if (current < previous3) {
+    return `-${previous3 - current} open issues vs ${comparisonWindowDays} days ago`;
+  }
+  if (current > previous3) {
+    return `+${current - previous3} open issues vs ${comparisonWindowDays} days ago`;
+  }
+  return `No change vs ${comparisonWindowDays} days ago`;
+}
+function buildDashboardKpiCards(params) {
+  const { metrics, hasCompanyContext } = params;
+  const genericContextNote = !hasCompanyContext ? "Open in a company dashboard." : metrics.status === "no_mappings" ? "Add a repository mapping." : null;
+  const backlogAvailable = hasCompanyContext && metrics.status === "ready" && metrics.notes.backlogHistoryAvailable && typeof metrics.backlog.currentOpenIssueCount === "number";
+  const backlogCurrent = metrics.backlog.currentOpenIssueCount;
+  const backlogComparison = metrics.backlog.comparisonOpenIssueCount;
+  const closedIssuesAvailable = hasCompanyContext && metrics.status === "ready" && metrics.notes.activityHistoryAvailable;
+  const createdAvailable = closedIssuesAvailable;
+  return [
+    {
+      key: "backlog",
+      title: "Open GitHub backlog",
+      valueLabel: formatWidgetMetricValue(backlogCurrent),
+      changeLabel: describeBacklogChange(backlogCurrent, backlogComparison, metrics.comparisonWindowDays),
+      note: genericContextNote ?? (backlogAvailable ? metrics.backlog.lastCapturedAt ? `Snapshot ${formatDate(metrics.backlog.lastCapturedAt, metrics.backlog.lastCapturedAt)}.` : "Latest sync snapshot." : "Run a full sync to seed backlog history."),
+      tone: backlogAvailable && backlogComparison !== void 0 && backlogCurrent !== void 0 ? getBacklogDeltaTone(backlogCurrent, backlogComparison) : "neutral",
+      chartKind: "line",
+      history: metrics.backlog.history.map((point5) => point5.value),
+      available: backlogAvailable
+    },
+    {
+      key: "closed-issues",
+      title: "GitHub issues closed",
+      valueLabel: String(metrics.githubIssuesClosed.currentPeriodCount),
+      changeLabel: describePeriodChange(
+        metrics.githubIssuesClosed.currentPeriodCount,
+        metrics.githubIssuesClosed.previousPeriodCount,
+        metrics.comparisonWindowDays
+      ),
+      note: genericContextNote ?? (closedIssuesAvailable ? metrics.githubIssuesClosed.lastRecordedAt ? `Through ${formatDate(metrics.githubIssuesClosed.lastRecordedAt, metrics.githubIssuesClosed.lastRecordedAt)}.` : "From sync-detected closures." : "Appears after sync records closures."),
+      tone: getPeriodDeltaTone(
+        metrics.githubIssuesClosed.currentPeriodCount,
+        metrics.githubIssuesClosed.previousPeriodCount
+      ),
+      chartKind: "bars",
+      history: metrics.githubIssuesClosed.history.map((point5) => point5.value),
+      available: closedIssuesAvailable
+    },
+    {
+      key: "created-prs",
+      title: "Paperclip PRs created",
+      valueLabel: String(metrics.paperclipPullRequestsCreated.currentPeriodCount),
+      changeLabel: describePeriodChange(
+        metrics.paperclipPullRequestsCreated.currentPeriodCount,
+        metrics.paperclipPullRequestsCreated.previousPeriodCount,
+        metrics.comparisonWindowDays
+      ),
+      note: genericContextNote ?? (createdAvailable ? metrics.paperclipPullRequestsCreated.lastRecordedAt ? `Through ${formatDate(metrics.paperclipPullRequestsCreated.lastRecordedAt, metrics.paperclipPullRequestsCreated.lastRecordedAt)}.` : "From Paperclip-attributed PR events." : "Appears after Paperclip records PR creation."),
+      tone: getPeriodDeltaTone(
+        metrics.paperclipPullRequestsCreated.currentPeriodCount,
+        metrics.paperclipPullRequestsCreated.previousPeriodCount
+      ),
+      chartKind: "bars",
+      history: metrics.paperclipPullRequestsCreated.history.map((point5) => point5.value),
+      available: createdAvailable
+    }
+  ];
+}
+function buildLineChartPath(values, width, height) {
+  if (values.length === 0) {
+    return "";
+  }
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  return values.map((value, index2) => {
+    const x = values.length === 1 ? width / 2 : index2 / (values.length - 1) * width;
+    const y = height - (value - min) / range * (height - 6) - 3;
+    return `${index2 === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`;
+  }).join(" ");
+}
+function buildLineChartArea(values, width, height) {
+  const linePath = buildLineChartPath(values, width, height);
+  if (!linePath || values.length === 0) {
+    return "";
+  }
+  const firstX = values.length === 1 ? width / 2 : 0;
+  const lastX = values.length === 1 ? width / 2 : width;
+  return `${linePath} L ${lastX.toFixed(2)} ${height} L ${firstX.toFixed(2)} ${height} Z`;
+}
+function DashboardTrendGraphic(props) {
+  const values = props.values.length > 0 ? props.values : [0];
+  const width = 112;
+  const height = 32;
+  const max = Math.max(...values, 0, 1);
+  const linePath = props.kind === "line" ? buildLineChartPath(values, width, height) : "";
+  const areaPath = props.kind === "line" ? buildLineChartArea(values, width, height) : "";
+  return /* @__PURE__ */ jsx2("div", { className: `ghsync-widget__trend ghsync-widget__trend--${props.tone}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { viewBox: `0 0 ${width} ${height}`, focusable: "false", children: props.kind === "line" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    areaPath ? /* @__PURE__ */ jsx2("path", { d: areaPath, className: "ghsync-widget__trend-area" }) : null,
+    linePath ? /* @__PURE__ */ jsx2("path", { d: linePath, className: "ghsync-widget__trend-line" }) : null
+  ] }) : values.map((value, index2) => {
+    const barWidth = width / values.length;
+    const x = index2 * barWidth + 1;
+    const barHeight = Math.max(3, value / max * (height - 4));
+    const y = height - barHeight - 1;
+    return /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        x,
+        y,
+        width: Math.max(2, barWidth - 3),
+        height: barHeight,
+        rx: 2,
+        className: "ghsync-widget__trend-bar"
+      },
+      `${index2}-${value}`
+    );
+  }) }) });
+}
 function buildThemeVars(theme, themeMode) {
   return {
     colorScheme: themeMode,
@@ -33195,15 +33502,19 @@ function GitHubSyncDashboardWidget() {
     runningSync,
     scheduleFrequencyMinutes
   });
-  const syncProgress = getRunningSyncProgressModel(displaySyncState);
   const syncMetricCards = getSyncMetricCards({
     totalSyncedIssuesCount: current.totalSyncedIssuesCount,
     erroredIssuesCount: displaySyncState.erroredIssuesCount,
     syncState: displaySyncState,
     savedMappingCount
   });
+  const syncProgress = getRunningSyncProgressModel(displaySyncState);
   const lastSync = formatDate(displaySyncState.checkedAt, "Never");
   const armSyncCompletionToast = useSyncCompletionToast(displaySyncState, toast);
+  const widgetStatusSummary = showInitialLoadingState ? "Fetching the latest GitHub sync state from the worker." : syncProgress ? [
+    syncProgress.issueProgressLabel,
+    syncProgress.currentIssueLabel ?? syncProgress.repositoryPosition
+  ].filter((value) => Boolean(value)).join(" \xB7 ") : syncSetupIssue === "missing_token" ? "Open settings to validate GitHub access." : syncSetupIssue === "missing_mapping" ? "Open settings and add a repository. The Paperclip project will be created if it does not exist." : syncSetupIssue === "missing_board_access" ? hasCompanyContext ? "Open settings and connect Paperclip board access before running sync." : "Open plugin settings inside a company to connect required Paperclip board access." : displaySyncState.message ?? (displaySyncState.checkedAt ? `Last checked ${lastSync}.` : `Automatic sync runs ${scheduleDescription}.`);
   useEffect2(() => {
     if (settings.data) {
       setCachedSettings(settings.data);
@@ -33232,41 +33543,41 @@ function GitHubSyncDashboardWidget() {
     if (displaySyncState.status !== "running") {
       return;
     }
-    const refreshSettings = () => {
+    const intervalId = globalThis.setInterval(() => {
       try {
         settings.refresh();
       } catch {
         return;
       }
-    };
-    const intervalId = globalThis.setInterval(() => {
-      refreshSettings();
     }, SYNC_POLL_INTERVAL_MS);
-    refreshSettings();
+    try {
+      settings.refresh();
+    } catch {
+    }
     return () => {
       globalThis.clearInterval(intervalId);
     };
   }, [displaySyncState.status, settings.refresh]);
   useEffect2(() => {
-    const refreshSettings = () => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const refreshWidgetData = () => {
       try {
         settings.refresh();
       } catch {
         return;
       }
     };
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      return;
-    }
     const handleSettingsUpdated = () => {
-      refreshSettings();
+      refreshWidgetData();
     };
     const handleWindowFocus = () => {
-      refreshSettings();
+      refreshWidgetData();
     };
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
-        refreshSettings();
+        refreshWidgetData();
       }
     };
     window.addEventListener(GITHUB_SYNC_SETTINGS_UPDATED_EVENT, handleSettingsUpdated);
@@ -33299,7 +33610,7 @@ function GitHubSyncDashboardWidget() {
       });
       armSyncCompletionToast(nextSyncState);
       notifyGitHubSyncSettingsChanged();
-      await settings.refresh();
+      await Promise.resolve().then(() => settings.refresh());
     } catch (error) {
       const message = getActionErrorMessage(error, "Unable to run GitHub sync.");
       setManualSyncRequestError(message);
@@ -33309,7 +33620,7 @@ function GitHubSyncDashboardWidget() {
         tone: "error"
       });
       try {
-        await settings.refresh();
+        await Promise.resolve().then(() => settings.refresh());
       } catch {
         return;
       }
@@ -33333,7 +33644,7 @@ function GitHubSyncDashboardWidget() {
       });
       armSyncCompletionToast(nextSyncState);
       notifyGitHubSyncSettingsChanged();
-      await settings.refresh();
+      await Promise.resolve().then(() => settings.refresh());
     } catch (error) {
       const message = getActionErrorMessage(error, "Unable to cancel GitHub sync.");
       setManualSyncRequestError(message);
@@ -33378,40 +33689,42 @@ function GitHubSyncDashboardWidget() {
         ] })
       ] }),
       settings.error ? /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__message", children: settings.error.message }) : null,
-      /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__stats", children: syncMetricCards.map((metric) => /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: `ghsync-widget__stat${metric.emphasized ? " ghsync-widget__stat--emphasized" : ""}`,
-          children: [
-            /* @__PURE__ */ jsx2("strong", { children: showInitialLoadingState ? /* @__PURE__ */ jsx2(LoadingSpinner, { size: "sm", label: `Loading ${metric.label.toLowerCase()}` }) : metric.value }),
-            /* @__PURE__ */ jsx2("span", { children: metric.label }),
-            /* @__PURE__ */ jsx2("p", { children: showInitialLoadingState ? "Loading current sync data." : metric.description })
-          ]
-        },
-        metric.key
-      )) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__stats", children: syncMetricCards.map((card) => {
+        const tone = getSyncMetricCardTone(card);
+        return /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: `ghsync-widget__stat ghsync-widget__stat--${tone}`,
+            children: [
+              /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__stat-top", children: /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__stat-value", children: [
+                /* @__PURE__ */ jsx2("span", { className: "ghsync-widget__stat-label", children: card.label }),
+                /* @__PURE__ */ jsx2("strong", { children: showInitialLoadingState ? /* @__PURE__ */ jsx2(LoadingSpinner, { size: "sm", label: `Loading ${card.label.toLowerCase()}` }) : String(card.value) })
+              ] }) }),
+              /* @__PURE__ */ jsx2("p", { className: `ghsync-widget__stat-change ghsync-widget__stat-change--${tone}`, children: showInitialLoadingState ? "Loading sync summary." : card.description })
+            ]
+          },
+          card.key
+        );
+      }) }),
+      syncInFlight ? /* @__PURE__ */ jsx2(
         SyncProgressPanel,
         {
           syncState: displaySyncState,
           compact: true
         }
-      ),
+      ) : null,
       /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__summary", children: [
         /* @__PURE__ */ jsx2("strong", { children: showInitialLoadingState ? "Loading sync status\u2026" : syncInFlight ? "Live run" : syncUnlocked ? "Latest result" : "Next step" }),
-        /* @__PURE__ */ jsx2("span", { children: showInitialLoadingState ? "Fetching the latest GitHub sync state from the worker." : syncProgress ? [
-          syncProgress.issueProgressLabel,
-          syncProgress.currentIssueLabel ?? syncProgress.repositoryPosition
-        ].filter((value) => Boolean(value)).join(" \xB7 ") : syncSetupIssue === "missing_token" ? "Open settings to validate GitHub access." : syncSetupIssue === "missing_mapping" ? "Open settings and add a repository. The Paperclip project will be created if it does not exist." : syncSetupIssue === "missing_board_access" ? hasCompanyContext ? "Open settings and connect Paperclip board access before running sync." : "Open plugin settings inside a company to connect required Paperclip board access." : displaySyncState.checkedAt ? `Last checked ${lastSync}.` : "Everything is configured. Run the first sync when you are ready." })
+        /* @__PURE__ */ jsx2("span", { children: widgetStatusSummary })
       ] }),
-      /* @__PURE__ */ jsx2(
+      manualSyncRequestError || displaySyncState.status === "error" || Boolean(displaySyncState.recentFailures?.length) ? /* @__PURE__ */ jsx2(
         SyncDiagnosticsPanel,
         {
           syncState: displaySyncState,
           requestError: manualSyncRequestError,
           compact: true
         }
-      ),
+      ) : null,
       /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__actions", children: /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__button-row", children: [
         /* @__PURE__ */ jsx2(
           "a",
@@ -33445,6 +33758,230 @@ function GitHubSyncDashboardWidget() {
     ] })
   ] });
 }
+function GitHubSyncKpiDashboardWidget() {
+  const hostContext = useHostContext();
+  const settings = usePluginData(
+    "settings.registration",
+    hostContext.companyId ? { companyId: hostContext.companyId } : {}
+  );
+  const dashboardMetrics = usePluginData(
+    "dashboard.metrics",
+    hostContext.companyId ? { companyId: hostContext.companyId } : {}
+  );
+  const [settingsHref, setSettingsHref] = useState2(SETTINGS_INDEX_HREF2);
+  const [cachedSettings, setCachedSettings] = useState2(null);
+  const [cachedDashboardMetrics, setCachedDashboardMetrics] = useState2(null);
+  const themeMode = useResolvedThemeMode();
+  const boardAccessRequirement = usePaperclipBoardAccessRequirement();
+  const theme = themeMode === "light" ? LIGHT_PALETTE : DARK_PALETTE;
+  const themeVars = buildThemeVars(theme, themeMode);
+  const current = settings.data ?? cachedSettings ?? EMPTY_SETTINGS;
+  const currentDashboardMetrics = dashboardMetrics.data ?? cachedDashboardMetrics ?? EMPTY_DASHBOARD_METRICS;
+  const showInitialLoadingState = settings.loading && !settings.data && !cachedSettings;
+  const syncState = current.syncState ?? EMPTY_SETTINGS.syncState;
+  const tokenValid = Boolean(current.githubTokenConfigured);
+  const hasCompanyContext = Boolean(hostContext.companyId);
+  const showInitialKpiLoadingState = hasCompanyContext && dashboardMetrics.loading && !dashboardMetrics.data && !cachedDashboardMetrics;
+  const boardAccessConfigured = Boolean(current.paperclipBoardAccessConfigured);
+  const boardAccessRequired = boardAccessRequirement.required;
+  const boardAccessReady = !boardAccessRequired || hasCompanyContext && boardAccessConfigured;
+  const savedMappingCount = getComparableMappings(current.mappings ?? []).length;
+  const syncSetupIssue = getSyncSetupIssue({
+    tokenStatus: tokenValid ? "valid" : "required",
+    savedMappingCount,
+    boardAccessRequired,
+    boardAccessConfigured,
+    hasCompanyContext
+  });
+  const displaySyncState = getDisplaySyncState(syncState, {
+    hasToken: tokenValid,
+    hasMappings: savedMappingCount > 0,
+    hasBoardAccess: boardAccessReady
+  });
+  const syncPersistedRunning = displaySyncState.status === "running";
+  const scheduleDescription = formatScheduleFrequency(normalizeScheduleFrequencyMinutes(current.scheduleFrequencyMinutes));
+  const kpiSummary = getKpiDashboardSummary({
+    hasCompanyContext,
+    metrics: currentDashboardMetrics,
+    syncState: displaySyncState,
+    syncIssue: syncSetupIssue
+  });
+  const kpiCards = buildDashboardKpiCards({
+    metrics: currentDashboardMetrics,
+    hasCompanyContext
+  });
+  const syncProgress = getRunningSyncProgressModel(displaySyncState);
+  const lastSync = formatDate(displaySyncState.checkedAt, "Never");
+  const widgetStatusSummary = showInitialLoadingState ? "Loading KPI status." : syncProgress ? [
+    syncProgress.issueProgressLabel,
+    syncProgress.currentIssueLabel ?? syncProgress.repositoryPosition
+  ].filter((value) => Boolean(value)).join(" \xB7 ") : syncSetupIssue === "missing_token" ? "Finish setup to refresh KPI history." : syncSetupIssue === "missing_board_access" ? "Connect board access to refresh KPI history." : !hasCompanyContext ? "Open in a company dashboard." : currentDashboardMetrics.status === "no_mappings" ? "Add a mapped repository." : !currentDashboardMetrics.notes.backlogHistoryAvailable && !currentDashboardMetrics.notes.activityHistoryAvailable ? "Run a full sync to seed KPI history." : [
+    currentDashboardMetrics.backlog.lastCapturedAt ? `Backlog ${formatDate(currentDashboardMetrics.backlog.lastCapturedAt, currentDashboardMetrics.backlog.lastCapturedAt)}` : null,
+    currentDashboardMetrics.githubIssuesClosed.lastRecordedAt ? `Activity ${formatDate(currentDashboardMetrics.githubIssuesClosed.lastRecordedAt, currentDashboardMetrics.githubIssuesClosed.lastRecordedAt)}` : null
+  ].filter((value) => Boolean(value)).join(" \xB7 ") || (displaySyncState.checkedAt ? `Last sync ${lastSync}` : `Auto-sync ${scheduleDescription}`);
+  useEffect2(() => {
+    if (settings.data) {
+      setCachedSettings(settings.data);
+    }
+  }, [settings.data]);
+  useEffect2(() => {
+    if (dashboardMetrics.data) {
+      setCachedDashboardMetrics(dashboardMetrics.data);
+    }
+  }, [dashboardMetrics.data]);
+  useEffect2(() => {
+    let cancelled = false;
+    async function loadSettingsHref() {
+      try {
+        const plugins = await fetchJson("/api/plugins");
+        if (!cancelled) {
+          setSettingsHref(resolvePluginSettingsHref(plugins));
+        }
+      } catch {
+        if (!cancelled) {
+          setSettingsHref(SETTINGS_INDEX_HREF2);
+        }
+      }
+    }
+    void loadSettingsHref();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect2(() => {
+    if (displaySyncState.status !== "running") {
+      return;
+    }
+    const refreshWidgetData = () => {
+      try {
+        settings.refresh();
+      } catch {
+      }
+      try {
+        dashboardMetrics.refresh();
+      } catch {
+        return;
+      }
+    };
+    const intervalId = globalThis.setInterval(() => {
+      refreshWidgetData();
+    }, SYNC_POLL_INTERVAL_MS);
+    refreshWidgetData();
+    return () => {
+      globalThis.clearInterval(intervalId);
+    };
+  }, [dashboardMetrics.refresh, displaySyncState.status, settings.refresh]);
+  useEffect2(() => {
+    const refreshWidgetData = () => {
+      try {
+        settings.refresh();
+      } catch {
+      }
+      try {
+        dashboardMetrics.refresh();
+      } catch {
+        return;
+      }
+    };
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const handleSettingsUpdated = () => {
+      refreshWidgetData();
+    };
+    const handleWindowFocus = () => {
+      refreshWidgetData();
+    };
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        refreshWidgetData();
+      }
+    };
+    window.addEventListener(GITHUB_SYNC_SETTINGS_UPDATED_EVENT, handleSettingsUpdated);
+    window.addEventListener("focus", handleWindowFocus);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      window.removeEventListener(GITHUB_SYNC_SETTINGS_UPDATED_EVENT, handleSettingsUpdated);
+      window.removeEventListener("focus", handleWindowFocus);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [dashboardMetrics.refresh, settings.refresh]);
+  return /* @__PURE__ */ jsxs2("section", { className: "ghsync-widget", style: themeVars, children: [
+    /* @__PURE__ */ jsx2("style", { children: WIDGET_STYLES }),
+    /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__card", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__top", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__eyebrow", children: "GitHub KPIs" }),
+          /* @__PURE__ */ jsx2("h3", { children: kpiSummary.title }),
+          /* @__PURE__ */ jsx2("p", { children: kpiSummary.body }),
+          /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__meta", children: [
+            /* @__PURE__ */ jsxs2("span", { children: [
+              savedMappingCount,
+              " ",
+              savedMappingCount === 1 ? "repository" : "repositories"
+            ] }),
+            /* @__PURE__ */ jsx2("span", { className: "ghsync-widget__meta-dot", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs2("span", { children: [
+              "Auto-sync ",
+              scheduleDescription
+            ] }),
+            /* @__PURE__ */ jsx2("span", { className: "ghsync-widget__meta-dot", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs2("span", { children: [
+              "Last sync ",
+              lastSync
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: `ghsync__badge ${getToneClass(kpiSummary.tone)}`, children: [
+          /* @__PURE__ */ jsx2("span", { className: "ghsync__badge-dot", "aria-hidden": "true" }),
+          kpiSummary.label
+        ] })
+      ] }),
+      settings.error ? /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__message", children: settings.error.message }) : null,
+      dashboardMetrics.error ? /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__message", children: dashboardMetrics.error.message }) : null,
+      /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__stats", children: kpiCards.map((card) => /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: `ghsync-widget__stat ghsync-widget__stat--${card.tone}`,
+          children: [
+            /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__stat-top", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__stat-value", children: [
+                /* @__PURE__ */ jsx2("span", { className: "ghsync-widget__stat-label", children: card.title }),
+                /* @__PURE__ */ jsx2("strong", { children: showInitialKpiLoadingState ? /* @__PURE__ */ jsx2(LoadingSpinner, { size: "sm", label: `Loading ${card.title.toLowerCase()}` }) : card.valueLabel })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                DashboardTrendGraphic,
+                {
+                  values: card.history,
+                  tone: card.tone,
+                  kind: card.chartKind
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx2("p", { className: `ghsync-widget__stat-change ghsync-widget__stat-change--${card.tone}`, children: showInitialKpiLoadingState ? "Loading KPI history." : card.changeLabel }),
+            /* @__PURE__ */ jsx2("p", { className: "ghsync-widget__stat-note", children: showInitialKpiLoadingState ? "Fetching the latest company KPI data." : card.note })
+          ]
+        },
+        card.key
+      )) }),
+      /* @__PURE__ */ jsxs2("div", { className: "ghsync-widget__summary", children: [
+        /* @__PURE__ */ jsx2("strong", { children: showInitialLoadingState ? "Status" : syncPersistedRunning ? "Live sync" : "Latest snapshot" }),
+        /* @__PURE__ */ jsx2("span", { children: widgetStatusSummary })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__actions", children: /* @__PURE__ */ jsx2("div", { className: "ghsync-widget__button-row", children: /* @__PURE__ */ jsx2(
+        "a",
+        {
+          href: settingsHref,
+          className: getPluginActionClassName({
+            variant: "secondary",
+            extraClassName: "ghsync-widget__link"
+          }),
+          children: "Open settings"
+        }
+      ) }) })
+    ] })
+  ] });
+}
 function GitHubMarkIcon(props) {
   return /* @__PURE__ */ jsx2(
     "svg",
@@ -34217,6 +34754,7 @@ export {
   GitHubSyncGlobalToolbarButton,
   GitHubSyncIssueDetailTab,
   GitHubSyncIssueTaskDetailView,
+  GitHubSyncKpiDashboardWidget,
   GitHubSyncProjectPullRequestsPage,
   GitHubSyncProjectPullRequestsSidebarItem,
   GitHubSyncSettingsPage,