ignore: cloud styles

cloud/app/src/routes/workspace/[id].css

@@ -23,7 +23,6 @@
       padding-bottom: var(--space-16);
     }
   }
-}
 
   /* Common elements */
   button {
@@ -59,7 +58,7 @@ button {
       }
     }
 
-  &[color="primary"] {
+    &[data-color="primary"] {
       background-color: var(--color-primary);
       border-color: var(--color-primary);
       color: var(--color-primary-text);
@@ -70,7 +69,7 @@ button {
       }
     }
 
-  &[color="ghost"] {
+    &[data-color="ghost"] {
       background-color: transparent;
       border-color: transparent;
       color: var(--color-text-muted);
@@ -172,10 +171,8 @@ a {
       flex-direction: column;
       gap: var(--space-3);
       padding: var(--space-4);
-    background-color: var(--color-bg-surface);
       border: 1px solid var(--color-border);
       border-radius: var(--border-radius-sm);
-    max-width: 32rem;
 
       input {
         padding: var(--space-2) var(--space-3);
@@ -475,3 +472,4 @@ a {
       }
     }
   }
+}

cloud/app/src/routes/workspace/[id].tsx

@@ -292,15 +292,6 @@ export default function () {
       </section>
 
       <div data-slot="sections">
-        {/* Actor Section */}
-        <section data-slot="actor-section">
-          <div data-slot="section-title">
-            <h2>Actor</h2>
-            <p>Current authenticated user information and session details.</p>
-          </div>
-          <div>{JSON.stringify(actor())}</div>
-        </section>
-
         {/* API Keys Section */}
         <section data-slot="api-keys-section">
           <div data-slot="section-title">
@@ -321,14 +312,7 @@ export default function () {
                 />
                 <div data-slot="form-actions">
                   <button
-                    color="primary"
+                    data-color="ghost"
-                    disabled={createKeySubmission.pending || !keyName().trim()}
-                    onClick={handleCreateKey}
-                  >
-                    {createKeySubmission.pending ? "Creating..." : "Create"}
-                  </button>
-                  <button
-                    color="ghost"
                     onClick={() => {
                       setShowCreateForm(false)
                       setKeyName("")
@@ -336,12 +320,19 @@ export default function () {
                   >
                     Cancel
                   </button>
+                  <button
+                    data-color="primary"
+                    disabled={createKeySubmission.pending || !keyName().trim()}
+                    onClick={handleCreateKey}
+                  >
+                    {createKeySubmission.pending ? "Creating..." : "Create"}
+                  </button>
                 </div>
               </div>
             }
           >
             <button
-              color="primary"
+              data-color="primary"
               onClick={() => {
                 console.log("clicked")
                 setShowCreateForm(true)
@@ -351,8 +342,9 @@ export default function () {
             </button>
           </Show>
           <div data-slot="api-keys-table">
+            {/* when={keys()?.length */}
             <Show
-              when={keys()?.length}
+              when={dummyApiKeyData.length > 0}
               fallback={
                 <div data-slot="empty-state">
                   <p>Create an opencode Gateway API key</p>
@@ -369,7 +361,7 @@ export default function () {
                   </tr>
                 </thead>
                 <tbody>
-                  <For each={keys()!}>
+                  <For each={dummyApiKeyData}>
                     {/* Real data: keys() */}
                     {(key) => (
                       <tr>
@@ -389,7 +381,7 @@ export default function () {
                           {formatDateForTable(key.timeCreated)}
                         </td>
                         <td data-slot="key-actions">
-                          <button color="ghost" onClick={() => handleDeleteKey(key.id)} title="Delete API key">
+                          <button data-color="ghost" onClick={() => handleDeleteKey(key.id)} title="Delete API key">
                             Delete
                           </button>
                         </td>
@@ -426,7 +418,7 @@ export default function () {
                 })()}
               </span>
             </div>
-            <button color="primary" disabled={createCheckoutUrlSubmission.pending} onClick={handleBuyCredits}>
+            <button data-color="primary" disabled={createCheckoutUrlSubmission.pending} onClick={handleBuyCredits}>
               {createCheckoutUrlSubmission.pending ? "Loading..." : "Buy Credits"}
             </button>
           </div>