From a59aec87dc9b275b0db93b293108295d6f505697 Mon Sep 17 00:00:00 2001
From: Anton Sizikov <asizikov@github.com>
Date: Wed, 1 Jul 2026 22:35:06 +0200
Subject: [PATCH 1/2] Add deprecation banner for app retirement

Add a shared DeprecationBanner component announcing the app retirement
on August 3, 2026, with a link to fork the repo. It replaces the old
"moving to usage-based billing" banner on the overview page and is
also shown on the upload page.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 src/App.tsx                          |  1 -
 src/components/DeprecationBanner.tsx | 29 ++++++++++++++++++++++++++++
 src/components/UploadPage.tsx        |  2 ++
 src/components/index.ts              |  1 +
 src/config/links.ts                  |  2 +-
 src/views/OverviewView.tsx           | 29 ++--------------------------
 6 files changed, 35 insertions(+), 29 deletions(-)
 create mode 100644 src/components/DeprecationBanner.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fc5cd31..db46d65 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -757,7 +757,6 @@ function App() {
             {visibleActiveView === 'overview' ? (
               <OverviewView
                 error={error}
-                fileName={fileName}
                 dailyUsageData={dailyUsageData}
                 rangeStart={rangeStart}
                 rangeEnd={rangeEnd}
diff --git a/src/components/DeprecationBanner.tsx b/src/components/DeprecationBanner.tsx
new file mode 100644
index 0000000..9c6fa7b
--- /dev/null
+++ b/src/components/DeprecationBanner.tsx
@@ -0,0 +1,29 @@
+import { InfoIcon } from '@primer/octicons-react'
+import { appLinks } from '../config/links'
+
+type DeprecationBannerProps = {
+  className?: string
+}
+
+export function DeprecationBanner({ className = '' }: DeprecationBannerProps) {
+  return (
+    <div
+      className={`flex items-start gap-3 rounded-md border border-border-attention bg-bg-attention-muted px-4 py-3 text-left text-sm text-fg-default ${className}`.trim()}
+      role="note"
+    >
+      <InfoIcon size={16} className="mt-0.5 shrink-0 fill-[color:var(--fgColor-attention)]" aria-hidden />
+      <p className="m-0 leading-relaxed">
+        <strong>The Copilot Billing Preview app will be retired on August 3, 2026.</strong>
+        <br />
+        If you use it to review your GitHub Copilot spend, you can get the same visibility, and more, directly in your
+        GitHub billing settings.
+        {' '}
+        If you want to maintain a copy of the app,{' '}
+        <a href={appLinks.copilotBillingPreviewRepository} target="_blank" rel="noopener noreferrer">
+          <strong>feel free to fork it</strong>
+        </a>
+        .
+      </p>
+    </div>
+  )
+}
diff --git a/src/components/UploadPage.tsx b/src/components/UploadPage.tsx
index 7d03436..b27d8e9 100644
--- a/src/components/UploadPage.tsx
+++ b/src/components/UploadPage.tsx
@@ -1,6 +1,7 @@
 import type { DragEvent, KeyboardEvent, MouseEvent } from 'react'
 import { MarkGithubIcon, UploadIcon, LockIcon } from '@primer/octicons-react'
 import { appLinks } from '../config/links'
+import { DeprecationBanner } from './DeprecationBanner'
 
 export interface UploadPageProps {
   dragActive: boolean
@@ -62,6 +63,7 @@ export function UploadPage({
             Learn more about usage-based billing &rarr;
           </a>
         </p>
+        <DeprecationBanner className="mb-6" />
         {error && (
           <div
             className="mb-4 px-4 py-3 bg-bg-attention-muted border border-border-attention rounded-md text-[color:var(--fgColor-attention)] text-[14px] text-center"
diff --git a/src/components/index.ts b/src/components/index.ts
index 23c01b7..3578acb 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,6 +8,7 @@ export { DualAxisLineChart } from './DualAxisLineChart'
 export type { DualAxisLineChartProps, LineSeries } from './DualAxisLineChart'
 export { NewVersionBanner } from './NewVersionBanner'
 export type { NewVersionBannerProps } from './NewVersionBanner'
+export { DeprecationBanner } from './DeprecationBanner'
 export { UploadPage } from './UploadPage'
 export type { UploadPageProps } from './UploadPage'
 export { SummaryCard, CostBreakdownCard, BillingComparisonCard } from './ui'
diff --git a/src/config/links.ts b/src/config/links.ts
index d21f6ca..6519a49 100644
--- a/src/config/links.ts
+++ b/src/config/links.ts
@@ -7,8 +7,8 @@ export const appLinks = {
   promotionalAmountsDocs: 'https://docs.github.com/en/enterprise-cloud@latest/copilot/concepts/billing/usage-based-billing-for-organizations-and-enterprises#promotional-amounts-for-existing-customers',
   usageBasedBillingForIndividualsDocs: 'https://docs.github.com/en/copilot/concepts/billing/usage-based-billing-for-individuals',
   flexAllotmentDocs: 'https://docs.github.com/en/copilot/concepts/billing/usage-based-billing-for-individuals#how-do-ai-credits-work',
-  usageBasedBillingForOrganizationsDocs: 'https://docs.github.com/en/copilot/concepts/billing/usage-based-billing-for-organizations-and-enterprises',
   aiCreditsForOrganizationsDocs: 'https://docs.github.com/en/copilot/concepts/billing/usage-based-billing-for-organizations-and-enterprises#how-do-ai-credits-work',
   copilotMaxPlanBlog: 'https://github.blog/news-insights/company-news/github-copilot-individual-plans-introducing-flex-allotments-in-pro-and-pro-and-a-new-max-plan/',
+  copilotBillingPreviewRepository: 'https://github.com/github/copilot-billing-preview',
   issues: 'https://github.com/github/copilot-billing-preview/issues',
 } as const
diff --git a/src/views/OverviewView.tsx b/src/views/OverviewView.tsx
index 277583b..6fb4e85 100644
--- a/src/views/OverviewView.tsx
+++ b/src/views/OverviewView.tsx
@@ -1,4 +1,4 @@
-import { DualAxisLineChart } from '../components'
+import { DeprecationBanner, DualAxisLineChart } from '../components'
 import { BillingProjectionDisclaimer, BillingTotalsCards } from '../components/ui'
 import { appLinks } from '../config/links'
 import type { ReportPlanScope } from '../pipeline/aicIncludedCredits'
@@ -11,7 +11,6 @@ import { isNativeAiCreditsMode, type ReportMode } from '../utils/reportMode'
 
 type OverviewViewProps = {
   error: string | null
-  fileName: string | null
   dailyUsageData: DailyUsageData[]
   rangeStart: string | null
   rangeEnd: string | null
@@ -47,7 +46,6 @@ function createEmptyDailyUsage(date: string): DailyUsageData {
 
 export function OverviewView({
   error,
-  fileName,
   dailyUsageData,
   rangeStart,
   rangeEnd,
@@ -83,9 +81,6 @@ export function OverviewView({
     ? new Date(rangeStart + 'T00:00:00').toLocaleString('en-US', { month: 'long', year: 'numeric' })
     : null
   const savings = overviewTotals.netAmount - aicNetAmount
-  const usageBasedBillingDocsUrl = reportPlanScope === 'individual'
-    ? appLinks.usageBasedBillingForIndividualsDocs
-    : appLinks.usageBasedBillingForOrganizationsDocs
   const includedCreditsValue = includedAicCredits * AIC_UNIT_PRICE_USD
   const includedCreditsLabel = 'Included value'
   const includedCreditsLegendLabel = reportPlanScope === 'individual' ? 'Included AI Credits' : 'Included AI Credits pool'
@@ -120,27 +115,7 @@ export function OverviewView({
 
       {dailyUsageData.length > 0 && (
         <section>
-          {!isNativeAiCredits && (
-            <div className="bg-bg-accent-muted border border-border-accent/25 rounded-md py-5 px-6 mb-5 flex flex-col gap-2">
-              <h2 className="m-0 text-base font-semibold text-fg-default">GitHub Copilot is moving to usage-based billing</h2>
-              <p className="m-0 text-sm text-fg-default leading-normal">
-                Starting June 1, 2026, Copilot usage will be measured in AI Credits (AICs) instead of Premium Requests (PRUs). <strong className="text-[15px] font-bold bg-bg-default py-[2px] px-2 rounded-[4px] whitespace-nowrap">1 AIC = $0.01.</strong> This is a preview estimate based on your uploaded report. Actual bills under usage-based billing may differ based on model mix and final pricing.
-              </p>
-              {fileName && (
-                <p className="m-0 text-[13px] text-fg-muted leading-normal">
-                  Note: This is a preview estimate based on your uploaded report ({fileName}). Actual bills under usage-based billing may differ based on model mix and final pricing.
-                </p>
-              )}
-              <a
-                href={usageBasedBillingDocsUrl}
-                className="text-sm font-medium text-fg-accent no-underline self-start hover:underline"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Learn more about usage-based billing &rarr;
-              </a>
-            </div>
-          )}
+          <DeprecationBanner className="mb-5" />
 
           {!isNativeAiCredits && periodLabel && (
             <p className="text-base font-normal text-center mb-1 text-fg-default">

From 8794ed74e96b602613fcceaea92df66d7441970a Mon Sep 17 00:00:00 2001
From: Anton Sizikov <asizikov@github.com>
Date: Wed, 1 Jul 2026 22:41:15 +0200
Subject: [PATCH 2/2] Use fg-attention token for banner icon fill

Replace the arbitrary fill-[color:var(--fgColor-attention)] class on
the DeprecationBanner InfoIcon with the idiomatic fill-fg-attention
Tailwind token, adding --color-fg-attention to the theme mapping
alongside the other fg-* tokens.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 src/components/DeprecationBanner.tsx | 2 +-
 src/theme.css                        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DeprecationBanner.tsx b/src/components/DeprecationBanner.tsx
index 9c6fa7b..389e200 100644
--- a/src/components/DeprecationBanner.tsx
+++ b/src/components/DeprecationBanner.tsx
@@ -11,7 +11,7 @@ export function DeprecationBanner({ className = '' }: DeprecationBannerProps) {
       className={`flex items-start gap-3 rounded-md border border-border-attention bg-bg-attention-muted px-4 py-3 text-left text-sm text-fg-default ${className}`.trim()}
       role="note"
     >
-      <InfoIcon size={16} className="mt-0.5 shrink-0 fill-[color:var(--fgColor-attention)]" aria-hidden />
+      <InfoIcon size={16} className="mt-0.5 shrink-0 fill-fg-attention" aria-hidden />
       <p className="m-0 leading-relaxed">
         <strong>The Copilot Billing Preview app will be retired on August 3, 2026.</strong>
         <br />
diff --git a/src/theme.css b/src/theme.css
index f68dd88..4df7870 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -16,6 +16,7 @@
   --color-fg-default: var(--fgColor-default);
   --color-fg-muted: var(--fgColor-muted);
   --color-fg-accent: var(--fgColor-accent);
+  --color-fg-attention: var(--fgColor-attention);
   --color-fg-danger: var(--fgColor-danger);
   --color-fg-on-emphasis: var(--fgColor-onEmphasis);