ignore: zen

cloud/app/src/routes/index.css

@@ -78,22 +78,22 @@
 
   [data-component="cta"] {
     border-top: 2px solid var(--color-border);
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: stretch;
+    display: flex;
 
     & > div + div {
       border-left: 2px solid var(--color-border);
     }
 
-    [data-slot="left"],
-    [data-slot="right"] {
+    [data-slot="left"] {
+      flex: 0 0 auto;
       text-align: center;
       line-height: 1.4;
       padding: var(--vertical-padding) 2rem;
       text-transform: uppercase;
+      font-size: 1.125rem;
 
       @media (max-width: 30rem) {
+        font-size: 1rem;
         padding-bottom: calc(var(--vertical-padding) + 4px);
       }
 
@@ -103,53 +103,18 @@
       }
     }
 
-    [data-slot="center"] {
+    [data-slot="right"] {
+      flex: 1;
       padding: var(--vertical-padding) 1rem;
     }
 
-    @media (max-width: 55rem) {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-template-rows: auto auto;
-
-      [data-slot="left"] {
-        grid-column: 1;
-        grid-row: 1;
-      }
+    @media (max-width: 50rem) {
+      flex-direction: column;
 
       [data-slot="right"] {
-        grid-column: 2;
-        grid-row: 1;
-      }
-
-      [data-slot="center"] {
-        grid-column: 1 / -1;
-        grid-row: 2;
         border-left: none;
         border-top: 2px solid var(--color-border);
       }
-
-      @media (max-width: 22rem) {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto auto auto;
-
-        [data-slot="left"] {
-          grid-column: 1;
-          grid-row: 1;
-        }
-
-        [data-slot="right"] {
-          grid-column: 1;
-          grid-row: 2;
-          border-top: 2px solid var(--color-border);
-          border-left: none;
-        }
-
-        [data-slot="center"] {
-          grid-column: 1;
-          grid-row: 3;
-        }
-      }
     }
 
     [data-slot="command"] {
@@ -168,7 +133,7 @@
         @media (max-width: 24rem) {
           font-size: 0.875rem;
         }
-        @media (max-width: 64rem) {
+        @media (max-width: 56rem) {
           [data-slot="protocol"] {
             display: none;
           }
@@ -188,6 +153,32 @@
     }
   }
 
+  [data-component="zen"] {
+    border-top: 2px solid var(--color-border);
+    text-align: center;
+    font-size: 1.125rem;
+    padding: var(--vertical-padding) 2rem;
+
+    @media (max-width: 30rem) {
+      font-size: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    a[target="_self"] {
+      text-transform: uppercase;
+    }
+
+    [data-slot="description"] {
+      color: var(--color-text-secondary);
+    }
+
+    [data-slot="divider"] {
+      font-weight: bold;
+      color: var(--color-border);
+    }
+  }
+
   [data-component="features"] {
     border-top: 2px solid var(--color-border);
     padding: var(--padding);

cloud/app/src/routes/index.tsx

@@ -11,6 +11,7 @@ import { createAsync, query, redirect } from "@solidjs/router"
 import { getActor } from "~/context/auth"
 import { withActor } from "~/context/auth.withActor"
 import { Account } from "@opencode/cloud-core/account.js"
+import { Show } from "solid-js"
 
 function CopyStatus() {
   return (
@@ -26,13 +27,13 @@ const isLoggedIn = query(async () => {
   const actor = await getActor()
   if (actor.type === "account") {
     const workspaces = await withActor(() => Account.workspaces())
-    throw redirect(`/workspace/${workspaces[0].id}`)
+    return workspaces[0].id
+    // throw redirect(`/workspace/${workspaces[0].id}`)
   }
-  return false
 }, "isLoggedIn")
 
 export default function Home() {
-  createAsync(() => isLoggedIn(), {
+  const workspaceId = createAsync(() => isLoggedIn(), {
     deferStream: true,
   })
   onMount(() => {
@@ -69,7 +70,7 @@ export default function Home() {
           <div data-slot="left">
             <a href="/docs">Get Started</a>
           </div>
-          <div data-slot="center">
+          <div data-slot="right">
             <button data-copy data-slot="command">
               <span>
                 <span>curl -fsSL&nbsp;</span>
@@ -80,13 +81,28 @@ export default function Home() {
               <CopyStatus />
             </button>
           </div>
-          <div data-slot="right">
-            <a href="/auth/authorize" target="_self">
-              Login
-            </a>
-          </div>
         </section>
 
+        <Show when={false}>
+          <section data-component="zen">
+            <a href="/docs/zen">opencode zen</a>
+            <span data-slot="description">
+              , a curated list of models provided by opencode
+            </span>
+            <span data-slot="divider">&nbsp;/&nbsp;</span>
+            <a
+              href={
+                workspaceId()
+                  ? `/workspace/${workspaceId()}`
+                  : "/auth/authorize"
+              }
+              target="_self"
+            >
+              Sign in
+            </a>
+          </section>
+        </Show>
+
         <section data-component="features">
           <ul data-slot="list">
             <li>

cloud/app/src/routes/workspace/[id].tsx

@@ -63,7 +63,7 @@ const createPortalUrl = action(async (returnUrl: string) => {
   return withActor(() => Billing.generatePortalUrl({ returnUrl }))
 }, "portalUrl")
 
-export default function () {
+export default function() {
 
   /////////////////
   // Keys section
@@ -180,9 +180,9 @@ export default function () {
     <div data-slot="root">
       {/* Title */}
       <section data-slot="title-section">
-        <h1>Gateway</h1>
+        <h1>opencode zen</h1>
         <p>
-          Coding models optimized for use with opencode. <a href="/docs">Learn more</a>.
+          Curated list of models provided by opencode. <a href="/docs/zen">Learn more</a>.
         </p>
       </section>