ignore: cloud

5 files changed, 266 insertions, 305 deletions

diff --git a/cloud/app/src/routes/workspace.tsx b/cloud/app/src/routes/workspace.tsx
index d0678ef83..0724dd7f4 100644
--- a/cloud/app/src/routes/workspace.tsx
+++ b/cloud/app/src/routes/workspace.tsx
@@ -11,21 +11,9 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
             <IconLogo />
           </a>
         </div>
-        <nav data-slot="header-nav">
-          <a href="/home">Home</a>
-          <a href="/docs">Docs</a>
-        </nav>
         <div data-slot="header-actions">
-          <a href="https://github.com" target="_blank" rel="noopener" title="GitHub">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-            </svg>
-          </a>
-          <a href="https://discord.gg" target="_blank" rel="noopener" title="Discord">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0019 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z" />
-            </svg>
-          </a>
+          <span>[email protected]</span>
+          <a href="/logout">Logout</a>
         </div>
       </header>
       {props.children}
diff --git a/cloud/app/src/routes/workspace/[workspaceID].tsx b/cloud/app/src/routes/workspace/[id].tsx
index f507b5152..abada1c89 100644
--- a/cloud/app/src/routes/workspace/[workspaceID].tsx
+++ b/cloud/app/src/routes/workspace/[id].tsx
@@ -4,6 +4,7 @@ import { action, createAsync, revalidate, query, useAction, useSubmission } from
 import { createEffect, createSignal, For, onMount, Show } from "solid-js"
 import { getActor } from "~/context/auth"
 import { withActor } from "~/context/auth.withActor"
+import "./index.css"
 
 /////////////////////////////////////
 // Keys related queries and actions
@@ -48,7 +49,7 @@ const createPortalUrl = action(async (returnUrl: string) => {
   return withActor(() => Billing.generatePortalUrl({ returnUrl }))
 }, "portalUrl")
 
-export default function () {
+export default function() {
   const actor = createAsync(() => getActor())
   onMount(() => {
     console.log("MOUNTED", actor())
diff --git a/cloud/app/src/routes/workspace/index.css b/cloud/app/src/routes/workspace/index.css
new file mode 100644
index 000000000..8d1006fca
--- /dev/null
+++ b/cloud/app/src/routes/workspace/index.css
@@ -0,0 +1,251 @@
+[data-page="workspace"] {
+  /* Main content container */
+  & > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+  }
+
+  /* Adjust header spacing */
+  [data-component="workspace-header"] + div {
+    margin-top: var(--space-2);
+  }
+
+  /* Section headers */
+  h1 {
+    font-size: var(--font-size-3xl);
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: -0.05em;
+    margin: 0;
+    color: var(--color-text);
+
+    @media (max-width: 30rem) {
+      font-size: var(--font-size-2xl);
+      line-height: 1.25;
+    }
+  }
+
+  /* Section descriptions */
+  p {
+    margin: 0;
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-md);
+    line-height: 1.5;
+  }
+
+  /* API Keys Section */
+  [data-slot="create-form"] {
+    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(--space-2);
+    max-width: 32rem;
+
+    input {
+      padding: var(--space-2) var(--space-3);
+      border: 1px solid var(--color-border);
+      border-radius: var(--space-2);
+      background-color: var(--color-bg);
+      color: var(--color-text);
+      font-size: var(--font-size-sm);
+      font-family: var(--font-mono);
+
+      &:focus {
+        outline: none;
+        border-color: var(--color-accent);
+      }
+
+      &::placeholder {
+        color: var(--color-text-disabled);
+      }
+    }
+
+    [data-slot="form-actions"] {
+      display: flex;
+      gap: var(--space-2);
+      justify-content: flex-end;
+    }
+  }
+
+  [data-slot="key-list"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  [data-slot="key-item"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: var(--space-4);
+    background-color: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--space-2);
+    gap: var(--space-4);
+
+    @media (max-width: 30rem) {
+      flex-direction: column;
+      gap: var(--space-3);
+    }
+  }
+
+  [data-slot="key-info"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    flex: 1;
+  }
+
+  [data-slot="key-name"] {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  [data-slot="key-value"] {
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+    color: var(--color-text-secondary);
+    background-color: var(--color-bg);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--space-1);
+    border: 1px solid var(--color-border-muted);
+  }
+
+  [data-slot="key-meta"] {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-disabled);
+  }
+
+  [data-slot="key-actions"] {
+    display: flex;
+    gap: var(--space-2);
+  }
+
+  [data-slot="empty-state"] {
+    padding: var(--space-8);
+    text-align: center;
+    color: var(--color-text-muted);
+    background-color: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--space-2);
+
+    p {
+      margin: 0;
+      font-size: var(--font-size-sm);
+    }
+  }
+
+  /* Balance Section */
+  [data-slot="balance"] {
+    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(--space-2);
+    max-width: 32rem;
+
+    p {
+      font-size: var(--font-size-2xl);
+      font-weight: 500;
+      color: var(--color-text);
+      margin: 0;
+    }
+  }
+
+  /* Payment and Usage Items */
+  [data-slot="payment-item"],
+  [data-slot="usage-item"] {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-3);
+    background-color: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--space-2);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-mono);
+
+    @media (max-width: 30rem) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-2);
+    }
+  }
+
+  [data-slot="payment-id"],
+  [data-slot="payment-amount"],
+  [data-slot="payment-date"],
+  [data-slot="usage-model"],
+  [data-slot="usage-tokens"],
+  [data-slot="usage-cost"],
+  [data-slot="usage-date"] {
+    color: var(--color-text-muted);
+  }
+
+  /* Buttons */
+  button {
+    padding: var(--space-2) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--space-2);
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-sans);
+    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;
+
+      &:hover {
+        background-color: var(--color-bg);
+        border-color: var(--color-border);
+        transform: none;
+      }
+    }
+
+    &[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);
+      }
+    }
+
+    &[color="ghost"] {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-text-muted);
+
+      &:hover {
+        background-color: var(--color-surface-hover);
+        border-color: var(--color-border);
+        color: var(--color-text);
+      }
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    /* Dark mode specific adjustments if needed */
+  }
+}
diff --git a/cloud/app/src/routes/workspace/workspace.css b/cloud/app/src/routes/workspace/workspace.css
index 66ae46ed4..7ea96aed2 100644
--- a/cloud/app/src/routes/workspace/workspace.css
+++ b/cloud/app/src/routes/workspace/workspace.css
@@ -18,8 +18,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 3.5rem;
-    padding: 0 var(--space-6);
+    padding: var(--space-4) var(--space-3);
     margin: calc(-1 * var(--space-6));
     margin-bottom: var(--space-6);
     border-bottom: 1px solid var(--color-border);
@@ -34,6 +33,7 @@
 
   [data-slot="header-brand"] {
     flex: 0 0 auto;
+    padding-top: 4px;
 
     svg {
       width: 138px;
@@ -48,300 +48,22 @@
     }
   }
 
-  [data-slot="header-nav"] {
-    display: flex;
-    gap: var(--space-4);
-    align-items: center;
-
-    @media (max-width: 50rem) {
-      display: none;
-    }
-
-    a {
-      color: var(--color-text-secondary);
-      text-decoration: none;
-      font-size: var(--font-size-sm);
-      font-weight: 400;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      transition: color 0.15s ease;
-
-      &:hover {
-        color: var(--color-text);
-      }
-    }
-  }
-
   [data-slot="header-actions"] {
     display: flex;
     gap: var(--space-4);
     align-items: center;
+    font-size: var(--font-size-sm);
 
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    span {
       color: var(--color-text-muted);
-      text-decoration: none;
-      transition: color 0.15s ease;
-
-      &:hover {
-        color: var(--color-text);
-      }
-
-      svg {
-        display: block;
-      }
-    }
-  }
-
-  /* Main content container */
-  & > div {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
-  }
-
-  /* Adjust header spacing */
-  [data-component="workspace-header"] + div {
-    margin-top: var(--space-2);
-  }
-
-  /* Section headers */
-  h1 {
-    font-size: var(--font-size-3xl);
-    font-weight: 500;
-    line-height: 1.2;
-    letter-spacing: -0.05em;
-    margin: 0;
-    color: var(--color-text);
-
-    @media (max-width: 30rem) {
-      font-size: var(--font-size-2xl);
-      line-height: 1.25;
-    }
-  }
-
-  /* Section descriptions */
-  p {
-    margin: 0;
-    color: var(--color-text-secondary);
-    font-size: var(--font-size-md);
-    line-height: 1.5;
-  }
-
-  /* API Keys Section */
-  [data-slot="create-form"] {
-    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(--space-2);
-    max-width: 32rem;
-
-    input {
-      padding: var(--space-2) var(--space-3);
-      border: 1px solid var(--color-border);
-      border-radius: var(--space-2);
-      background-color: var(--color-bg);
-      color: var(--color-text);
-      font-size: var(--font-size-sm);
-      font-family: var(--font-mono);
-
-      &:focus {
-        outline: none;
-        border-color: var(--color-accent);
-      }
-
-      &::placeholder {
-        color: var(--color-text-disabled);
-      }
-    }
-
-    [data-slot="form-actions"] {
-      display: flex;
-      gap: var(--space-2);
-      justify-content: flex-end;
     }
-  }
-
-  [data-slot="key-list"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  [data-slot="key-item"] {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: var(--space-4);
-    background-color: var(--color-bg-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--space-2);
-    gap: var(--space-4);
-
-    @media (max-width: 30rem) {
-      flex-direction: column;
-      gap: var(--space-3);
-    }
-  }
 
-  [data-slot="key-info"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    flex: 1;
-  }
-
-  [data-slot="key-name"] {
-    font-size: var(--font-size-md);
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  [data-slot="key-value"] {
-    font-size: var(--font-size-xs);
-    font-family: var(--font-mono);
-    color: var(--color-text-secondary);
-    background-color: var(--color-bg);
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--space-1);
-    border: 1px solid var(--color-border-muted);
-  }
-
-  [data-slot="key-meta"] {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-disabled);
-  }
-
-  [data-slot="key-actions"] {
-    display: flex;
-    gap: var(--space-2);
-  }
-
-  [data-slot="empty-state"] {
-    padding: var(--space-8);
-    text-align: center;
-    color: var(--color-text-muted);
-    background-color: var(--color-bg-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--space-2);
-
-    p {
-      margin: 0;
-      font-size: var(--font-size-sm);
-    }
-  }
-
-  /* Balance Section */
-  [data-slot="balance"] {
-    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(--space-2);
-    max-width: 32rem;
-
-    p {
-      font-size: var(--font-size-2xl);
-      font-weight: 500;
+    a {
       color: var(--color-text);
-      margin: 0;
-    }
-  }
-
-  /* Payment and Usage Items */
-  [data-slot="payment-item"],
-  [data-slot="usage-item"] {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-3);
-    background-color: var(--color-bg-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--space-2);
-    font-size: var(--font-size-sm);
-    font-family: var(--font-mono);
-
-    @media (max-width: 30rem) {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-2);
-    }
-  }
-
-  [data-slot="payment-id"],
-  [data-slot="payment-amount"],
-  [data-slot="payment-date"],
-  [data-slot="usage-model"],
-  [data-slot="usage-tokens"],
-  [data-slot="usage-cost"],
-  [data-slot="usage-date"] {
-    color: var(--color-text-muted);
-  }
-
-  /* Buttons */
-  button {
-    padding: var(--space-2) var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--space-2);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    font-size: var(--font-size-sm);
-    font-family: var(--font-sans);
-    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;
-
-      &:hover {
-        background-color: var(--color-bg);
-        border-color: var(--color-border);
-        transform: none;
-      }
-    }
-
-    &[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);
-      }
-    }
-
-    &[color="ghost"] {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--color-text-muted);
-
-      &:hover {
-        background-color: var(--color-surface-hover);
-        border-color: var(--color-border);
-        color: var(--color-text);
-      }
+      text-decoration: underline;
+      text-underline-offset: var(--space-0-75);
+      text-decoration-thickness: 1px;
+      text-transform: uppercase;
     }
   }
-
-  @media (prefers-color-scheme: dark) {
-    /* Dark mode specific adjustments if needed */
-  }
 }
diff --git a/cloud/app/src/style/token/color.css b/cloud/app/src/style/token/color.css
index 675ffdde2..f1a097d2f 100644
--- a/cloud/app/src/style/token/color.css
+++ b/cloud/app/src/style/token/color.css
@@ -42,12 +42,11 @@
   /* Surface colors */
   --color-surface: var(--color-bg-surface);
   --color-surface-hover: var(--color-bg-elevated);
-  --color-border: var(--color-border);
+  --color-surface-border: var(--color-border);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    /* OpenCode dark theme colors */
     --color-bg: #0c0c0e;
     --color-bg-surface: #161618;
     --color-bg-elevated: #1c1c1f;
@@ -87,6 +86,6 @@
     /* Surface colors */
     --color-surface: var(--color-bg-surface);
     --color-surface-hover: var(--color-bg-elevated);
-    --color-border: var(--color-border);
+    --color-surface-border: var(--color-border);
   }
 }