Update Electron billing UI for free plan

apps/x/apps/renderer/src/components/chat-sidebar.tsx

@@ -97,7 +97,7 @@ const BILLING_ERROR_PATTERNS = [
   {
     pattern: /not enough credits/i,
     title: 'You\'ve run out of credits',
-    subtitle: 'Upgrade your plan for more credits, or wait for your billing cycle to reset.',
+    subtitle: 'Upgrade your plan for more credits. Free usage resets daily at 00:00 UTC.',
     cta: 'Upgrade plan',
   },
   {

apps/x/apps/renderer/src/components/settings/account-settings.tsx

@@ -29,6 +29,7 @@ export function AccountSettings({ dialogOpen }: AccountSettingsProps) {
   const [connecting, setConnecting] = useState(false)
   const [appUrl, setAppUrl] = useState<string | null>(null)
   const { billing, isLoading: billingLoading } = useBilling(isRowboatConnected)
+  const hasPaidSubscription = billing?.subscriptionPlan === 'starter' || billing?.subscriptionPlan === 'pro'
 
   const checkConnection = useCallback(async () => {
     try {
@@ -178,9 +179,12 @@ export function AccountSettings({ dialogOpen }: AccountSettingsProps) {
                 {!billing.subscriptionPlan && (
                   <p className="text-xs text-muted-foreground">Subscribe to access AI features</p>
                 )}
+                {billing.subscriptionPlan === 'free' && (
+                  <p className="text-xs text-muted-foreground">Free usage resets daily at 00:00 UTC.</p>
+                )}
               </div>
               <Button variant="outline" size="sm" onClick={() => appUrl && window.open(`${appUrl}?intent=upgrade`)}>
-                {!billing.subscriptionPlan ? 'Subscribe' : 'Change plan'}
+                {!billing.subscriptionPlan ? 'Subscribe' : billing.subscriptionPlan === 'free' ? 'Upgrade' : 'Change plan'}
               </Button>
             </div>
           </div>
@@ -203,15 +207,15 @@ export function AccountSettings({ dialogOpen }: AccountSettingsProps) {
         <Button
           variant="outline"
           size="sm"
-          disabled={!billing?.subscriptionPlan}
+          disabled={!hasPaidSubscription}
           onClick={() => appUrl && window.open(appUrl)}
           className="gap-1.5"
         >
           <ExternalLink className="size-3" />
           Manage in Stripe
         </Button>
-        {!billing?.subscriptionPlan && (
-          <p className="text-[11px] text-muted-foreground">Subscribe to a plan first</p>
+        {!hasPaidSubscription && (
+          <p className="text-[11px] text-muted-foreground">Upgrade to a paid plan first</p>
         )}
       </div>
 

apps/x/apps/renderer/src/components/sidebar-content.tsx

@@ -758,7 +758,7 @@ export function SidebarContentPanel({
               onClick={() => appUrl && window.open(`${appUrl}?intent=upgrade`)}
               className="shrink-0 rounded-md bg-sidebar-foreground/10 px-2.5 py-1 text-[11px] font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-foreground/20"
             >
-              {!billing.subscriptionPlan ? 'Subscribe' : billing.subscriptionPlan === 'starter' ? 'Upgrade' : 'Manage'}
+              {!billing.subscriptionPlan || billing.subscriptionPlan === 'free' || billing.subscriptionPlan === 'starter' ? 'Upgrade' : 'Manage'}
             </button>
           </div>
         </div>

apps/x/apps/renderer/src/hooks/useBilling.ts

@@ -1,14 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-
-interface BillingInfo {
-  userEmail: string | null
-  userId: string | null
-  subscriptionPlan: string | null
-  subscriptionStatus: string | null
-  trialExpiresAt: string | null
-  sanctionedCredits: number
-  availableCredits: number
-}
+import type { BillingInfo } from '@x/shared/dist/billing.js'
 
 export function useBilling(isRowboatConnected: boolean) {
   const [billing, setBilling] = useState<BillingInfo | null>(null)