ignore: cloud styles

6 files changed, 401 insertions, 11 deletions

diff --git a/cloud/app/src/asset/logo.svg b/cloud/app/src/asset/logo.svg
new file mode 100644
index 000000000..cbfcccf51
--- /dev/null
+++ b/cloud/app/src/asset/logo.svg
@@ -0,0 +1,12 @@
+<svg width="289" height="50" viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="black"/>
+<path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="black"/>
+<path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="black"/>
+<path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="black"/>
+<path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="black"/>
+<path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="black"/>
+<path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="black"/>
+</svg>
diff --git a/cloud/app/src/component/icon.tsx b/cloud/app/src/component/icon.tsx
index 5a565ab9a..d73c178bc 100644
--- a/cloud/app/src/component/icon.tsx
+++ b/cloud/app/src/component/icon.tsx
@@ -1,6 +1,21 @@
-
 import { JSX } from "solid-js"
 
+export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox="0 0 289 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="currentColor" />
+      <path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="currentColor" />
+      <path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="currentColor" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="currentColor" />
+      <path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="currentColor" />
+      <path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="currentColor" />
+      <path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="currentColor" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="currentColor" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="currentColor" />
+      <path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="currentColor" />
+    </svg>
+  );
+}
 
 export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
   return (
diff --git a/cloud/app/src/routes/workspace.tsx b/cloud/app/src/routes/workspace.tsx
index 214d80c1b..d0678ef83 100644
--- a/cloud/app/src/routes/workspace.tsx
+++ b/cloud/app/src/routes/workspace.tsx
@@ -1,11 +1,34 @@
+import { IconLogo } from "../component/icon"
 import "./workspace/workspace.css"
-import { RouteSectionProps } from "@solidjs/router";
+import { RouteSectionProps } from "@solidjs/router"
 
 export default function WorkspaceLayout(props: RouteSectionProps) {
   return (
     <main data-page="workspace">
-      <h1>Workspace</h1>
+      <header data-component="workspace-header">
+        <div data-slot="header-brand">
+          <a href="/" data-component="site-title">
+            <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>
+        </div>
+      </header>
       {props.children}
     </main>
-  );
+  )
 }
diff --git a/cloud/app/src/routes/workspace/workspace.css b/cloud/app/src/routes/workspace/workspace.css
index 843e634f8..66ae46ed4 100644
--- a/cloud/app/src/routes/workspace/workspace.css
+++ b/cloud/app/src/routes/workspace/workspace.css
@@ -1,10 +1,347 @@
 [data-page="workspace"] {
-  font-family: var(--font-mono);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  line-height: 1;
+  padding: var(--space-6);
 
-  @media (prefers-color-scheme: dark) {
+  @media (max-width: 30rem) {
+    padding: var(--space-4);
+    gap: var(--space-5);
   }
-}
 
-[data-page="workspace"] {
-  font-family: var(--font-mono);
+  /* Workspace Header */
+  [data-component="workspace-header"] {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3.5rem;
+    padding: 0 var(--space-6);
+    margin: calc(-1 * var(--space-6));
+    margin-bottom: var(--space-6);
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-bg);
+
+    @media (max-width: 30rem) {
+      padding: 0 var(--space-4);
+      margin: calc(-1 * var(--space-4));
+      margin-bottom: var(--space-5);
+    }
+  }
+
+  [data-slot="header-brand"] {
+    flex: 0 0 auto;
+
+    svg {
+      width: 138px;
+    }
+
+    [data-component="site-title"] {
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      color: var(--color-text);
+      text-decoration: none;
+      letter-spacing: -0.02em;
+    }
+  }
+
+  [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;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      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;
+      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/style/token/color.css b/cloud/app/src/style/token/color.css
index 35846acd9..675ffdde2 100644
--- a/cloud/app/src/style/token/color.css
+++ b/cloud/app/src/style/token/color.css
@@ -8,6 +8,7 @@
   --color-bg-elevated: #ffffff;
 
   --color-text: #1d1d1f;
+  --color-text-secondary: #424245;
   --color-text-muted: #6e6e73;
   --color-text-disabled: #86868b;
 
@@ -52,6 +53,7 @@
     --color-bg-elevated: #1c1c1f;
 
     --color-text: #ffffff;
+    --color-text-secondary: #c7c7cc;
     --color-text-muted: #a1a1a6;
     --color-text-disabled: #68686f;
 
diff --git a/cloud/app/src/style/token/font.css b/cloud/app/src/style/token/font.css
index 1852af5b0..4d20e324c 100644
--- a/cloud/app/src/style/token/font.css
+++ b/cloud/app/src/style/token/font.css
@@ -13,6 +13,7 @@ body {
   --font-size-7xl: 4.5rem;
   --font-size-8xl: 6rem;
   --font-size-9xl: 8rem;
-  --font-mono: IBM Plex Mono;
-  --font-sans: Inter;
+
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-sans: var(--font-mono);
 }