summaryrefslogtreecommitdiffhomepage
path: root/cloud
diff options
context:
space:
mode:
Diffstat (limited to 'cloud')
-rw-r--r--cloud/app/src/routes/workspace/[id].css674
-rw-r--r--cloud/app/src/routes/workspace/[id].tsx38
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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-30 10:19:28 +0000