ignore: cloud styles

2 files changed, 351 insertions, 361 deletions

diff --git a/cloud/app/src/routes/workspace/[id].css b/cloud/app/src/routes/workspace/[id].css
index 887469e33..d29f5af32 100644
--- a/cloud/app/src/routes/workspace/[id].css
+++ b/cloud/app/src/routes/workspace/[id].css
@@ -23,453 +23,451 @@
       padding-bottom: var(--space-16);
     }
   }
-}
-
-/* Common elements */
-button {
-  padding: var(--space-3) var(--space-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--color-bg);
-  color: var(--color-text);
-  font-size: var(--font-size-sm);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-accent);
-  }
 
-  &:active {
-    transform: translateY(1px);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  /* Common elements */
+  button {
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    font-weight: 500;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.15s ease;
 
     &:hover {
-      background-color: var(--color-bg);
-      border-color: var(--color-border);
-      transform: none;
+      background-color: var(--color-surface-hover);
+      border-color: var(--color-accent);
     }
-  }
-
-  &[color="primary"] {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-    color: var(--color-primary-text);
 
-    &:hover {
-      background-color: var(--color-primary-hover);
-      border-color: var(--color-primary-hover);
+    &:active {
+      transform: translateY(1px);
     }
-  }
 
-  &[color="ghost"] {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--color-text-muted);
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
 
-    &:hover {
-      background-color: var(--color-surface-hover);
-      border-color: var(--color-border);
-      color: var(--color-text);
+      &:hover {
+        background-color: var(--color-bg);
+        border-color: var(--color-border);
+        transform: none;
+      }
     }
-  }
-}
-
-a {
-  color: var(--color-text);
-  text-decoration: underline;
-  text-underline-offset: var(--space-0-75);
-  text-decoration-thickness: 1px;
-}
 
-[data-slot="empty-state"] {
-  padding: var(--space-20) var(--space-6);
-  text-align: center;
-  border: 1px dashed var(--color-border);
-  border-radius: var(--border-radius-sm);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
+    &[data-color="primary"] {
+      background-color: var(--color-primary);
+      border-color: var(--color-primary);
+      color: var(--color-primary-text);
 
-  p {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-}
-
-/* Title section */
-[data-slot="title-section"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding-bottom: var(--space-8);
-  border-bottom: 1px solid var(--color-border);
-
-  h1 {
-    font-size: var(--font-size-2xl);
-    font-weight: 500;
-    line-height: 1.2;
-    letter-spacing: -0.03125rem;
-    margin: 0;
-    text-transform: uppercase;
-
-    @media (max-width: 30rem) {
-      font-size: var(--font-size-xl);
-      line-height: 1.25;
+      &:hover {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+      }
     }
-  }
-
-  p {
-    font-size: var(--font-size-md);
-    color: var(--color-text-muted);
 
-    a {
+    &[data-color="ghost"] {
+      background-color: transparent;
+      border-color: transparent;
       color: var(--color-text-muted);
-    }
-  }
-}
-
-/* Section titles */
-[data-slot="section-title"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-
-  h2 {
-    font-size: var(--font-size-md);
-    font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.03125rem;
-    margin: 0;
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
 
-    @media (max-width: 30rem) {
-      font-size: var(--font-size-lg);
-      line-height: 1.25;
+      &:hover {
+        background-color: var(--color-surface-hover);
+        border-color: var(--color-border);
+        color: var(--color-text);
+      }
     }
   }
 
-  p {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
+  a {
+    color: var(--color-text);
+    text-decoration: underline;
+    text-underline-offset: var(--space-0-75);
+    text-decoration-thickness: 1px;
   }
-}
 
-/* API Keys Section */
-[data-slot="api-keys-section"] {
-  [data-slot="create-form"] {
+  [data-slot="empty-state"] {
+    padding: var(--space-20) var(--space-6);
+    text-align: center;
+    border: 1px dashed var(--color-border);
+    border-radius: var(--border-radius-sm);
     display: flex;
     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;
+    gap: var(--space-2);
 
-    input {
-      padding: var(--space-2) var(--space-3);
-      border: 1px solid var(--color-border);
-      border-radius: var(--border-radius-sm);
-      background-color: var(--color-bg);
-      color: var(--color-text);
+    p {
       font-size: var(--font-size-sm);
-      font-family: var(--font-mono);
+      color: var(--color-text-muted);
+      margin: 0;
+    }
+  }
 
-      &:focus {
-        outline: none;
-        border-color: var(--color-accent);
-      }
+  /* Title section */
+  [data-slot="title-section"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding-bottom: var(--space-8);
+    border-bottom: 1px solid var(--color-border);
+
+    h1 {
+      font-size: var(--font-size-2xl);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.03125rem;
+      margin: 0;
+      text-transform: uppercase;
 
-      &::placeholder {
-        color: var(--color-text-disabled);
+      @media (max-width: 30rem) {
+        font-size: var(--font-size-xl);
+        line-height: 1.25;
       }
     }
 
-    [data-slot="form-actions"] {
-      display: flex;
-      gap: var(--space-2);
-      justify-content: flex-end;
-    }
-  }
+    p {
+      font-size: var(--font-size-md);
+      color: var(--color-text-muted);
 
-  [data-slot="api-keys-table"] {
-    overflow-x: auto;
+      a {
+        color: var(--color-text-muted);
+      }
+    }
   }
 
-  [data-slot="api-keys-table-element"] {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--font-size-sm);
+  /* Section titles */
+  [data-slot="section-title"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+
+    h2 {
+      font-size: var(--font-size-md);
+      font-weight: 600;
+      line-height: 1.2;
+      letter-spacing: -0.03125rem;
+      margin: 0;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
 
-    thead {
-      border-bottom: 1px solid var(--color-border);
+      @media (max-width: 30rem) {
+        font-size: var(--font-size-lg);
+        line-height: 1.25;
+      }
     }
 
-    th {
-      padding: var(--space-3) var(--space-4);
-      text-align: left;
-      font-weight: normal;
+    p {
+      font-size: var(--font-size-sm);
       color: var(--color-text-muted);
-      text-transform: uppercase;
     }
+  }
 
-    td {
-      padding: var(--space-3) var(--space-4);
-      border-bottom: 1px solid var(--color-border-muted);
-      color: var(--color-text-muted);
-      font-family: var(--font-mono);
+  /* API Keys Section */
+  [data-slot="api-keys-section"] {
+    [data-slot="create-form"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      padding: var(--space-4);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
 
-      &[data-slot="key-name"] {
+      input {
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
         color: var(--color-text);
-        font-family: var(--font-sans);
-        font-weight: 500;
-      }
-
-      &[data-slot="key-value"] {
+        font-size: var(--font-size-sm);
         font-family: var(--font-mono);
 
-        div {
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          gap: var(--space-2);
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
         }
-      }
 
-      &[data-slot="key-date"] {
-        color: var(--color-text);
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
       }
 
-      &[data-slot="key-actions"] {
-        font-family: var(--font-sans);
+      [data-slot="form-actions"] {
+        display: flex;
+        gap: var(--space-2);
+        justify-content: flex-end;
       }
     }
 
-    tbody tr {
-      &:last-child td {
-        border-bottom: none;
-      }
+    [data-slot="api-keys-table"] {
+      overflow-x: auto;
     }
 
-    @media (max-width: 40rem) {
-      th,
-      td {
-        padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+    [data-slot="api-keys-table-element"] {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--font-size-sm);
+
+      thead {
+        border-bottom: 1px solid var(--color-border);
       }
 
       th {
-        &:nth-child(3) /* Date */ {
-          display: none;
-        }
+        padding: var(--space-3) var(--space-4);
+        text-align: left;
+        font-weight: normal;
+        color: var(--color-text-muted);
+        text-transform: uppercase;
       }
 
       td {
-        &:nth-child(3) /* Date */ {
-          display: none;
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--color-border-muted);
+        color: var(--color-text-muted);
+        font-family: var(--font-mono);
+
+        &[data-slot="key-name"] {
+          color: var(--color-text);
+          font-family: var(--font-sans);
+          font-weight: 500;
         }
-      }
-    }
-  }
-}
 
-/* Balance Section */
-[data-slot="balance-section"] {
-  [data-slot="balance"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
-    min-width: 14.5rem;
-    width: fit-content;
+        &[data-slot="key-value"] {
+          font-family: var(--font-mono);
 
-    [data-slot="amount"] {
-      padding: var(--space-3-5) var(--space-4);
-      background-color: var(--color-bg-surface);
-      border-radius: var(--border-radius-sm);
-      display: flex;
-      align-items: baseline;
-      gap: var(--space-1);
-      justify-content: flex-end;
+          div {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: var(--space-2);
+          }
+        }
 
-      &.danger {
-        [data-slot="value"] {
-          color: var(--color-danger);
+        &[data-slot="key-date"] {
+          color: var(--color-text);
+        }
+
+        &[data-slot="key-actions"] {
+          font-family: var(--font-sans);
         }
       }
 
-      [data-slot="currency"] {
-        position: relative;
-        bottom: 2px;
-        font-size: var(--font-size-lg);
-        color: var(--color-text-muted);
-        font-weight: 400;
+      tbody tr {
+        &:last-child td {
+          border-bottom: none;
+        }
       }
 
-      [data-slot="value"] {
-        font-size: var(--font-size-3xl);
-        font-weight: 500;
-        color: var(--color-text);
+      @media (max-width: 40rem) {
+        th,
+        td {
+          padding: var(--space-2) var(--space-3);
+          font-size: var(--font-size-xs);
+        }
+
+        th {
+          &:nth-child(3) /* Date */ {
+            display: none;
+          }
+        }
+
+        td {
+          &:nth-child(3) /* Date */ {
+            display: none;
+          }
+        }
       }
     }
   }
-}
 
-/* Payments Section */
-[data-slot="payments-section"] {
-  [data-slot="payments-table"] {
-    overflow-x: auto;
-  }
+  /* Balance Section */
+  [data-slot="balance-section"] {
+    [data-slot="balance"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      padding: var(--space-4);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      min-width: 14.5rem;
+      width: fit-content;
+
+      [data-slot="amount"] {
+        padding: var(--space-3-5) var(--space-4);
+        background-color: var(--color-bg-surface);
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: baseline;
+        gap: var(--space-1);
+        justify-content: flex-end;
+
+        &.danger {
+          [data-slot="value"] {
+            color: var(--color-danger);
+          }
+        }
 
-  [data-slot="payments-table-element"] {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--font-size-sm);
+        [data-slot="currency"] {
+          position: relative;
+          bottom: 2px;
+          font-size: var(--font-size-lg);
+          color: var(--color-text-muted);
+          font-weight: 400;
+        }
 
-    thead {
-      border-bottom: 1px solid var(--color-border);
+        [data-slot="value"] {
+          font-size: var(--font-size-3xl);
+          font-weight: 500;
+          color: var(--color-text);
+        }
+      }
     }
+  }
 
-    th {
-      padding: var(--space-3) var(--space-4);
-      text-align: left;
-      font-weight: normal;
-      color: var(--color-text-muted);
-      text-transform: uppercase;
+  /* Payments Section */
+  [data-slot="payments-section"] {
+    [data-slot="payments-table"] {
+      overflow-x: auto;
     }
 
-    td {
-      padding: var(--space-3) var(--space-4);
-      border-bottom: 1px solid var(--color-border-muted);
-      color: var(--color-text-muted);
-      font-family: var(--font-mono);
+    [data-slot="payments-table-element"] {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--font-size-sm);
 
-      &[data-slot="payment-date"] {
-        color: var(--color-text);
+      thead {
+        border-bottom: 1px solid var(--color-border);
       }
 
-      &[data-slot="payment-id"] {
-        font-family: var(--font-mono);
-        font-weight: 400;
+      th {
+        padding: var(--space-3) var(--space-4);
+        text-align: left;
+        font-weight: normal;
         color: var(--color-text-muted);
-        max-width: 200px;
-        word-break: break-word;
+        text-transform: uppercase;
       }
 
-      &[data-slot="payment-amount"] {
-        color: var(--color-text);
-      }
-    }
+      td {
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--color-border-muted);
+        color: var(--color-text-muted);
+        font-family: var(--font-mono);
 
-    tbody tr {
-      &:last-child td {
-        border-bottom: none;
-      }
-    }
+        &[data-slot="payment-date"] {
+          color: var(--color-text);
+        }
 
-    @media (max-width: 40rem) {
-      th,
-      td {
-        padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
-      }
+        &[data-slot="payment-id"] {
+          font-family: var(--font-mono);
+          font-weight: 400;
+          color: var(--color-text-muted);
+          max-width: 200px;
+          word-break: break-word;
+        }
 
-      th {
-        &:nth-child(2) /* Payment ID */ {
-          display: none;
+        &[data-slot="payment-amount"] {
+          color: var(--color-text);
         }
       }
 
-      td {
-        &:nth-child(2) /* Payment ID */ {
-          display: none;
+      tbody tr {
+        &:last-child td {
+          border-bottom: none;
         }
       }
-    }
-  }
-}
 
-/* Usage Section */
-[data-slot="usage-section"] {
-  [data-slot="usage-table"] {
-    overflow-x: auto;
-  }
+      @media (max-width: 40rem) {
+        th,
+        td {
+          padding: var(--space-2) var(--space-3);
+          font-size: var(--font-size-xs);
+        }
 
-  [data-slot="usage-table-element"] {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--font-size-sm);
+        th {
+          &:nth-child(2) /* Payment ID */ {
+            display: none;
+          }
+        }
 
-    thead {
-      border-bottom: 1px solid var(--color-border);
+        td {
+          &:nth-child(2) /* Payment ID */ {
+            display: none;
+          }
+        }
+      }
     }
+  }
 
-    th {
-      padding: var(--space-3) var(--space-4);
-      text-align: left;
-      font-weight: normal;
-      color: var(--color-text-muted);
-      text-transform: uppercase;
+  /* Usage Section */
+  [data-slot="usage-section"] {
+    [data-slot="usage-table"] {
+      overflow-x: auto;
     }
 
-    td {
-      padding: var(--space-3) var(--space-4);
-      border-bottom: 1px solid var(--color-border-muted);
-      color: var(--color-text-muted);
-      font-family: var(--font-mono);
+    [data-slot="usage-table-element"] {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--font-size-sm);
 
-      &[data-slot="usage-date"] {
-        color: var(--color-text);
+      thead {
+        border-bottom: 1px solid var(--color-border);
       }
 
-      &[data-slot="usage-model"] {
-        font-family: var(--font-sans);
-        font-weight: 400;
-        color: var(--color-text-secondary);
-        max-width: 200px;
-        word-break: break-word;
+      th {
+        padding: var(--space-3) var(--space-4);
+        text-align: left;
+        font-weight: normal;
+        color: var(--color-text-muted);
+        text-transform: uppercase;
       }
 
-      &[data-slot="usage-cost"] {
-        color: var(--color-text);
-      }
-    }
+      td {
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--color-border-muted);
+        color: var(--color-text-muted);
+        font-family: var(--font-mono);
 
-    tbody tr {
-      &:last-child td {
-        border-bottom: none;
-      }
-    }
+        &[data-slot="usage-date"] {
+          color: var(--color-text);
+        }
 
-    @media (max-width: 40rem) {
-      th,
-      td {
-        padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        &[data-slot="usage-model"] {
+          font-family: var(--font-sans);
+          font-weight: 400;
+          color: var(--color-text-secondary);
+          max-width: 200px;
+          word-break: break-word;
+        }
+
+        &[data-slot="usage-cost"] {
+          color: var(--color-text);
+        }
       }
 
-      th {
-        &:nth-child(2) /* Model */ {
-          display: none;
+      tbody tr {
+        &:last-child td {
+          border-bottom: none;
         }
       }
 
-      td {
-        &:nth-child(2) /* Model */ {
-          display: none;
+      @media (max-width: 40rem) {
+        th,
+        td {
+          padding: var(--space-2) var(--space-3);
+          font-size: var(--font-size-xs);
+        }
+
+        th {
+          &:nth-child(2) /* Model */ {
+            display: none;
+          }
+        }
+
+        td {
+          &:nth-child(2) /* Model */ {
+            display: none;
+          }
         }
       }
     }
diff --git a/cloud/app/src/routes/workspace/[id].tsx b/cloud/app/src/routes/workspace/[id].tsx
index ccdfe42f5..70f1a7cdb 100644
--- a/cloud/app/src/routes/workspace/[id].tsx
+++ b/cloud/app/src/routes/workspace/[id].tsx
@@ -168,7 +168,7 @@ const dummyApiKeyData = [
   },
 ]
 
-export default function () {
+export default function() {
   const actor = createAsync(() => getActor())
   onMount(() => {
     console.log("MOUNTED", actor())
@@ -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"
-                    disabled={createKeySubmission.pending || !keyName().trim()}
-                    onClick={handleCreateKey}
-                  >
-                    {createKeySubmission.pending ? "Creating..." : "Create"}
-                  </button>
-                  <button
-                    color="ghost"
+                    data-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>