feat: show live credit balance in toolbar

Author: MasterSelects

src/App.css

@@ -736,6 +736,42 @@ input, textarea {
   margin-left: 0;
 }
 
+.toolbar-credit-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(120, 138, 255, 0.35);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(73, 86, 198, 0.3), rgba(39, 47, 108, 0.24));
+  color: var(--text-primary);
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.toolbar-credit-pill:hover {
+  border-color: rgba(132, 149, 255, 0.58);
+  background: linear-gradient(180deg, rgba(84, 98, 225, 0.36), rgba(49, 58, 134, 0.3));
+  transform: translateY(-1px);
+}
+
+.toolbar-credit-pill-label {
+  color: var(--text-secondary);
+  font-size: var(--font-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.toolbar-credit-pill-value {
+  color: #f4f7ff;
+  font-size: var(--font-sm);
+  font-variant-numeric: tabular-nums;
+}
+
 .toolbar-right .version {
   color: var(--text-secondary);
   font-size: var(--font-sm);

src/components/common/Toolbar.tsx

@@ -54,6 +54,7 @@ export function Toolbar({ onOpenChangelog }: ToolbarProps) {
     saveLayoutAsDefault: s.saveLayoutAsDefault,
   })));
   const { isSupported: midiSupported, isEnabled: midiEnabled, enableMIDI, disableMIDI, devices } = useMIDI();
+  const accountCredits = useAccountStore((s) => s.creditBalance);
   const accountSession = useAccountStore((s) => s.session);
   const accountUser = useAccountStore((s) => s.user);
   const openAccountDialog = useAccountStore((s) => s.openAccountDialog);
@@ -800,6 +801,17 @@ export function Toolbar({ onOpenChangelog }: ToolbarProps) {
 
       {/* Status */}
       <div className="toolbar-section toolbar-right">
+        {accountSession?.authenticated && (
+          <button
+            className="toolbar-credit-pill"
+            onClick={openAccountDialog}
+            title={`${accountCredits} credits available`}
+            type="button"
+          >
+            <span className="toolbar-credit-pill-label">Credits</span>
+            <strong className="toolbar-credit-pill-value">{accountCredits}</strong>
+          </button>
+        )}
         <button
           className="menu-trigger"
           onClick={() => (accountSession?.authenticated ? openAccountDialog() : openAuthDialog())}

src/components/panels/AIChatPanel.tsx

@@ -160,6 +160,7 @@ export function AIChatPanel() {
   const { apiKeys, openSettings, aiApprovalMode } = useSettingsStore();
   const hostedAIEnabled = useAccountStore((s) => s.hostedAIEnabled);
   const accountSession = useAccountStore((s) => s.session);
+  const loadAccountState = useAccountStore((s) => s.loadAccountState);
   const openAuthDialog = useAccountStore((s) => s.openAuthDialog);
   const openPricingDialog = useAccountStore((s) => s.openPricingDialog);
   const openAccountDialog = useAccountStore((s) => s.openAccountDialog);
@@ -405,10 +406,13 @@ export function AIChatPanel() {
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to send message');
     } finally {
+      if (accessMode === 'hosted') {
+        void loadAccountState();
+      }
       setIsLoading(false);
       setCurrentToolAction(null);
     }
-  }, [input, hasAccess, isLoading, buildAPIMessages, callOpenAI, aiApprovalMode]);
+  }, [input, hasAccess, isLoading, buildAPIMessages, callOpenAI, aiApprovalMode, accessMode, loadAccountState]);
 
   // Handle key press
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {

src/components/panels/AIVideoPanel.tsx

@@ -162,6 +162,7 @@ export function AIVideoPanel() {
   const { apiKeys, openSettings } = useSettingsStore();
   const accountSession = useAccountStore((s) => s.session);
   const entitlements = useAccountStore((s) => s.entitlements);
+  const loadAccountState = useAccountStore((s) => s.loadAccountState);
   const openAuthDialog = useAccountStore((s) => s.openAuthDialog);
   const openPricingDialog = useAccountStore((s) => s.openPricingDialog);
   const openAccountDialog = useAccountStore((s) => s.openAccountDialog);
@@ -528,6 +529,10 @@ export function AIVideoPanel() {
         taskId = await service.createImageToVideo(params);
       }
 
+      if (selectedService === 'kieai' && !apiKeys.kieai && hasHostedKlingAccess) {
+        void loadAccountState();
+      }
+
       // Add job to list
       const job: GenerationJob = {
         id: taskId,
@@ -587,7 +592,7 @@ export function AIVideoPanel() {
   }, [
     prompt, negativePrompt, selectedProvider, selectedVersion, duration, aspectRatio, mode, cfgScale, generateAudio,
     generationType, startImagePreview, startCropData, endImagePreview, endCropData, isGenerating,
-    importVideoToProject, getCroppedImageUrl, getActiveService,
+    importVideoToProject, getCroppedImageUrl, getActiveService, selectedService, apiKeys.kieai, hasHostedKlingAccess, loadAccountState,
   ]);
 
   // Remove job from list