Add deprecation banner for app retirement

src/App.tsx

@@ -757,7 +757,6 @@ function App() {
             {visibleActiveView === 'overview' ? (
               <OverviewView
                 error={error}
-                fileName={fileName}
                 dailyUsageData={dailyUsageData}
                 rangeStart={rangeStart}
                 rangeEnd={rangeEnd}

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-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 />
+        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>
+  )
+}

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 →
           </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"

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'

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

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);
 

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">