feat(settings): surface GitHub connection needs_reauth/revoked

apps/next/src/components/integrations/github-integration-panel.tsx

@@ -48,6 +48,36 @@ export const GithubIntegrationPanel = () => {
         </CardTitle>
       </CardHeader>
       <CardContent className='space-y-4'>
+        {connection && connection.status !== 'active' ? (
+          <div
+            className={
+              connection.status === 'revoked'
+                ? 'rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-600'
+                : 'rounded-md border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-600'
+            }
+          >
+            <p className='font-medium'>
+              {connection.status === 'revoked'
+                ? 'GitHub App installation removed'
+                : 'GitHub access needs re-authorization'}
+            </p>
+            <p className='mt-1'>
+              {connection.status === 'revoked'
+                ? 'Reinstall the app to resume syncing.'
+                : 'Reconnect the app to resume syncing.'}
+            </p>
+            {installUrl ? (
+              <a
+                className='mt-2 inline-block underline'
+                href={installUrl}
+                target='_blank'
+                rel='noreferrer'
+              >
+                Reconnect GitHub App
+              </a>
+            ) : null}
+          </div>
+        ) : null}
         {connection ? (
           <div className='grid gap-2 text-sm'>
             <div>

apps/next/src/components/spoons/spoon-status-badge.tsx

@@ -13,6 +13,7 @@ const labels: Record<string, string> = {
   checking: 'Checking',
   conflict: 'Conflict',
   error: 'Error',
+  rate_limited: 'Rate limited',
   unknown: 'Unknown',
   active: 'Active',
   draft: 'Draft',
@@ -35,10 +36,16 @@ const variants: Record<
   active: 'default',
 };
 
+// Warning-tone statuses that need an amber accent the base variants don't
+// provide. Matches the app's existing amber warning styling.
+const classNames: Record<string, string> = {
+  rate_limited: 'border-amber-500/40 bg-amber-500/10 text-amber-700',
+};
+
 export const SpoonStatusBadge = ({ status }: { status?: Status }) => {
   const value = status ?? 'unknown';
   return (
-    <Badge variant={variants[value] ?? 'outline'}>
+    <Badge variant={variants[value] ?? 'outline'} className={classNames[value]}>
       {labels[value] ?? value.replaceAll('_', ' ')}
     </Badge>
   );