From 1e4f5710aaac7cfa071cc6ad83ceca6e09463623 Mon Sep 17 00:00:00 2001
From: Dax Raad <d@ironbay.co>
Date: Wed, 3 Sep 2025 13:17:32 -0400
Subject: [PATCH] wip: cloud

---
 cloud/app/src/routes/workspace/[id].tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/cloud/app/src/routes/workspace/[id].tsx b/cloud/app/src/routes/workspace/[id].tsx
index 85f4cc26..2e3f526c 100644
--- a/cloud/app/src/routes/workspace/[id].tsx
+++ b/cloud/app/src/routes/workspace/[id].tsx
@@ -2,7 +2,7 @@ import "./[id].css"
 import { Billing } from "@opencode/cloud-core/billing.js"
 import { Key } from "@opencode/cloud-core/key.js"
 import { action, createAsync, query, useAction, useSubmission, json, useParams } from "@solidjs/router"
-import { createSignal, For, Show } from "solid-js"
+import { createMemo, createSignal, For, Show } from "solid-js"
 import { withActor } from "~/context/auth.withActor"
 import { IconCopy, IconCheck } from "~/component/icon"
 import { User } from "@opencode/cloud-core/user.js"
@@ -335,22 +335,23 @@ export default function () {
                   <tr>
                     <th>Date</th>
                     <th>Model</th>
-                    <th>Tokens</th>
+                    <th>Input</th>
+                    <th>Output</th>
                     <th>Cost</th>
                   </tr>
                 </thead>
                 <tbody>
                   <For each={billingInfo()!.usage}>
                     {(usage) => {
-                      const totalTokens = usage.inputTokens + usage.outputTokens + (usage.reasoningTokens || 0)
-                      const date = new Date(usage.timeCreated)
+                      const date = createMemo(() => new Date(usage.timeCreated))
                       return (
                         <tr>
-                          <td data-slot="usage-date" title={formatDateUTC(date)}>
-                            {formatDateForTable(date)}
+                          <td data-slot="usage-date" title={formatDateUTC(date())}>
+                            {formatDateForTable(date())}
                           </td>
                           <td data-slot="usage-model">{usage.model}</td>
-                          <td data-slot="usage-tokens">{totalTokens.toLocaleString()}</td>
+                          <td data-slot="usage-tokens">{usage.inputTokens}</td>
+                          <td data-slot="usage-tokens">{usage.outputTokens}</td>
                           <td data-slot="usage-cost">${((usage.cost ?? 0) / 100000000).toFixed(4)}</td>
                         </tr>
                       )