feat(header): move the credits usage button into the view header

CHANGELOG.md

@@ -11,6 +11,13 @@ version with its date and start a fresh empty `[Unreleased]` above it.
 
 ## [Unreleased]
 
+### Changed
+
+- The usage button — the gauge that opens your plan and add-on quota panel —
+  moved from the composer's icon row into the view header, beside the feedback
+  and settings buttons. Its panel now opens downward from the header; the new
+  tab, new conversation, and history buttons stay in the composer row.
+
 ## [1.0.13] - 2026-09-20
 
 ### Added

src/features/chat/chat-view.ts

@@ -236,6 +236,14 @@ export class QoderianView extends ItemView {
     setIcon(this.updateBadgeEl, 'download');
     void this.refreshUpdateBadge();
 
+    // Credits usage popover (account-level, shared across tabs)
+    const agentCatalog = this.plugin.qoderServices.agentCatalog;
+    this.creditsUsageButton = new CreditsUsageButton(headerActions, {
+      getCachedUsage: () => agentCatalog.getUsageInfo(),
+      fetchUsage: () => fetchCreditsUsage(this.plugin),
+      subscribeRuntimeStatus: (listener) => agentCatalog.subscribeRuntimeStatus(listener),
+    });
+
     const feedbackBtn = headerActions.createDiv({ cls: 'qoderian-header-btn' });
     setIcon(feedbackBtn, 'message-circle-question');
     setButtonTooltip(feedbackBtn, t('commands.submitFeedback'));
@@ -299,14 +307,6 @@ export class QoderianView extends ItemView {
       this.toggleHistoryDropdown();
     });
 
-    // Credits usage popover (account-level, shared across tabs)
-    const agentCatalog = this.plugin.qoderServices.agentCatalog;
-    this.creditsUsageButton = new CreditsUsageButton(navActionsEl, {
-      getCachedUsage: () => agentCatalog.getUsageInfo(),
-      fetchUsage: () => fetchCreditsUsage(this.plugin),
-      subscribeRuntimeStatus: (listener) => agentCatalog.subscribeRuntimeStatus(listener),
-    });
-
     return wrapper;
   }
 

src/style/toolbar/credits-usage.css

@@ -1,4 +1,4 @@
-/* Credits usage button + popover panel (nav row, mirrors Qoder IDE usage view) */
+/* Credits usage button + popover panel (view header, mirrors Qoder IDE usage view) */
 
 .qoderian-credits-container {
   position: static;
@@ -9,13 +9,13 @@
   align-items: center;
 }
 
-/* Panel opens upward from the input footer, right-aligned. Width tracks the
-   footer so narrow sidebars clip neither edge (same approach as #18). */
+/* Panel opens downward from the header, right-aligned. Width tracks the header
+   so narrow sidebars clip neither edge (same approach as #18). */
 .qoderian-credits-panel {
   display: none;
   position: absolute;
-  bottom: 100%;
-  margin-bottom: 4px;
+  top: 100%;
+  margin-top: 6px;
   inset-inline-end: 0;
   width: min(320px, calc(100% - 16px));
   padding: 12px;
@@ -24,7 +24,7 @@
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--background-modifier-border);
   border-radius: 8px;
-  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
   z-index: 1000;
 }