diff --git a/cloud/app/src/routes/workspace.tsx b/cloud/app/src/routes/workspace.tsx
index d0678ef8..0724dd7f 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) {
-
{props.children}
diff --git a/cloud/app/src/routes/workspace/[workspaceID].tsx b/cloud/app/src/routes/workspace/[id].tsx
similarity index 99%
rename from cloud/app/src/routes/workspace/[workspaceID].tsx
rename to cloud/app/src/routes/workspace/[id].tsx
index f507b515..abada1c8 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 00000000..8d1006fc
--- /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 66ae46ed..7ea96aed 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);
+
+ span {
+ color: var(--color-text-muted);
+ }
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);
- }
+ text-decoration: underline;
+ text-underline-offset: var(--space-0-75);
+ text-decoration-thickness: 1px;
+ text-transform: uppercase;
}
-
- [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 675ffdde..f1a097d2 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);
}
}