zen: show subscription usage in usage history

packages/console/app/src/routes/workspace/[id]/usage-section.module.css

@@ -42,7 +42,7 @@
       font-family: var(--font-mono);
 
       &[data-slot="usage-date"] {
-        color: var(--color-text);
+        color: var(--color-text-muted);
       }
 
       &[data-slot="usage-model"] {
@@ -53,8 +53,7 @@
       }
 
       &[data-slot="usage-cost"] {
-        color: var(--color-text);
-        font-weight: 500;
+        color: var(--color-text-muted);
       }
 
       [data-slot="tokens-with-breakdown"] {

packages/console/app/src/routes/workspace/[id]/usage-section.tsx

@@ -170,7 +170,12 @@ export function UsageSection() {
                         </div>
                       </td>
                       <td data-slot="usage-cost">
-                        ${usage.enrichment?.plan === "sub" ? "0.0000" : ((usage.cost ?? 0) / 100000000).toFixed(4)}
+                        <Show
+                          when={usage.enrichment?.plan === "sub"}
+                          fallback={<>${((usage.cost ?? 0) / 100000000).toFixed(4)}</>}
+                        >
+                          subscription (${((usage.cost ?? 0) / 100000000).toFixed(4)})
+                        </Show>
                       </td>
                     </tr>
                   )