feat: show available reset credits

frontend/src/styles.css

@@ -499,6 +499,44 @@ header p {
   white-space: nowrap;
   font-size: 13px;
 }
+.reset-credits {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--accent2) 30%, var(--border));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--accent2) 7%, var(--panel));
+}
+.reset-credits > svg {
+  flex: none;
+  width: 20px;
+  color: var(--accent2);
+}
+.reset-credits-main,
+.reset-credits-expiry {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+.reset-credits-main small,
+.reset-credits-expiry small {
+  color: var(--muted);
+  font-size: 12px;
+}
+.reset-credits-main b,
+.reset-credits-expiry b {
+  font-size: 13px;
+}
+.reset-credits-expiry {
+  margin-left: auto;
+  text-align: right;
+}
+.reset-credits-expiry b {
+  overflow-wrap: anywhere;
+}
 .account-detail-state {
   display: flex;
   min-height: 170px;
@@ -1041,6 +1079,13 @@ a {
   .account-info-grid {
     grid-template-columns: 1fr 1fr;
   }
+  .reset-credits {
+    align-items: flex-start;
+  }
+  .reset-credits-expiry {
+    margin-left: 0;
+    text-align: left;
+  }
   .account {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;