wip: zen style model

3 files changed, 105 insertions, 30 deletions

diff --git a/packages/console/app/src/routes/workspace/[id]/index.tsx b/packages/console/app/src/routes/workspace/[id]/index.tsx
index 1345bf40f..46e6cf74b 100644
--- a/packages/console/app/src/routes/workspace/[id]/index.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/index.tsx
@@ -1,18 +1,10 @@
 import "./index.css"
 import { NewUserSection } from "./new-user-section"
 import { UsageSection } from "./usage-section"
-import { MemberSection } from "./members/member-section"
-import { SettingsSection } from "./settings/settings-section"
 import { ModelSection } from "./model-section"
 import { ProviderSection } from "./provider-section"
-import { Show } from "solid-js"
-import { createAsync, useParams } from "@solidjs/router"
-import { querySessionInfo } from "../common"
 
 export default function () {
-  const params = useParams()
-  const userInfo = createAsync(() => querySessionInfo(params.id))
-
   return (
     <div data-page="workspace-[id]">
       <section data-component="title-section">
@@ -28,10 +20,8 @@ export default function () {
 
       <div data-slot="sections">
         <NewUserSection />
-        <Show when={userInfo()?.isAdmin}>
-          <ModelSection />
-          <ProviderSection />
-        </Show>
+        <ModelSection />
+        <ProviderSection />
         <UsageSection />
       </div>
     </div>
diff --git a/packages/console/app/src/routes/workspace/[id]/model-section.module.css b/packages/console/app/src/routes/workspace/[id]/model-section.module.css
index 1a9a322fc..0c5b3a451 100644
--- a/packages/console/app/src/routes/workspace/[id]/model-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/model-section.module.css
@@ -1,5 +1,3 @@
-.root {}
-
 [data-slot="section-title"] {
   display: flex;
   flex-direction: column;
@@ -62,28 +60,101 @@
       color: var(--color-text);
     }
 
-    &[data-slot="model-status"] {
-      text-align: left;
-      color: var(--color-text);
-    }
-
     &[data-slot="model-toggle"] {
       text-align: left;
       font-family: var(--font-sans);
     }
-  }
 
-  tbody tr {
-    &[data-enabled="false"] {
-      opacity: 0.6;
+    [data-slot="model-toggle-label"] {
+      /* Toggle container */
+      position: relative;
+      display: inline-block;
+      width: 2.5rem;
+      height: 1.5rem;
+      cursor: pointer;
+
+      /* Hidden checkbox input */
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      /* Toggle track (background) */
+      span {
+        position: absolute;
+        inset: 0;
+        background-color: #ccc;
+        border: 1px solid #bbb;
+        border-radius: 1.5rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        /* Toggle handle (slider) */
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0.125rem;
+          width: 1.25rem;
+          height: 1.25rem;
+          background-color: white;
+          border: 1px solid #ddd;
+          border-radius: 50%;
+          transform: translateY(-50%);
+          transition: all 0.3s ease;
+        }
+      }
+
+      /* Checked state - track */
+      input:checked+span {
+        background-color: #21AD0E;
+        border-color: #148605;
+
+        /* Checked state - handle */
+        &::before {
+          transform: translateX(1rem) translateY(-50%);
+        }
+      }
+
+      /* Hover states */
+      &:hover span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+      }
+
+      input:checked:hover+span {
+        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
+      }
+
+      /* Disabled state */
+      &:has(input:disabled) {
+        cursor: not-allowed;
+      }
+
+      input:disabled+span {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      input:disabled:checked+span {
+        opacity: 0.5;
+      }
+
+      input:disabled~span:hover {
+        box-shadow: none;
+      }
     }
+  }
 
+  tbody tr {
     &:last-child td {
       border-bottom: none;
     }
   }
+}
 
-  @media (max-width: 40rem) {
+@media (max-width: 40rem) {
+  [data-slot="models-table-element"] {
 
     th,
     td {
diff --git a/packages/console/app/src/routes/workspace/[id]/model-section.tsx b/packages/console/app/src/routes/workspace/[id]/model-section.tsx
index 13ec0cf43..f4f2f913c 100644
--- a/packages/console/app/src/routes/workspace/[id]/model-section.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/model-section.tsx
@@ -4,6 +4,7 @@ import { createMemo, For, Show } from "solid-js"
 import { withActor } from "~/context/auth.withActor"
 import { ZenModel } from "@opencode-ai/console-core/model.js"
 import styles from "./model-section.module.css"
+import { querySessionInfo } from "../common"
 
 const getModelsInfo = query(async (workspaceID: string) => {
   "use server"
@@ -39,11 +40,15 @@ const updateModel = action(async (form: FormData) => {
 export function ModelSection() {
   const params = useParams()
   const modelsInfo = createAsync(() => getModelsInfo(params.id))
+  const userInfo = createAsync(() => querySessionInfo(params.id))
   return (
     <section class={styles.root}>
       <div data-slot="section-title">
         <h2>Models</h2>
-        <p>Manage models for your workspace.</p>
+        <p>
+          Manage which models workspace members can access. Requests will fail if a member tries to use a disabled
+          model.{userInfo()?.isAdmin ? "" : " To use a disabled model, contact your workspace’s admin."}
+        </p>
       </div>
       <div data-slot="models-list">
         <Show when={modelsInfo()}>
@@ -52,8 +57,7 @@ export function ModelSection() {
               <thead>
                 <tr>
                   <th>Model</th>
-                  <th>Status</th>
-                  <th>Action</th>
+                  <th>Enabled</th>
                 </tr>
               </thead>
               <tbody>
@@ -61,15 +65,25 @@ export function ModelSection() {
                   {(modelId) => {
                     const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(modelId))
                     return (
-                      <tr data-slot="model-row" data-enabled={isEnabled()}>
+                      <tr data-slot="model-row">
                         <td data-slot="model-name">{modelId}</td>
-                        <td data-slot="model-status">{isEnabled() ? "Enabled" : "Disabled"}</td>
                         <td data-slot="model-toggle">
                           <form action={updateModel} method="post">
                             <input type="hidden" name="model" value={modelId} />
                             <input type="hidden" name="workspaceID" value={params.id} />
                             <input type="hidden" name="enabled" value={isEnabled().toString()} />
-                            <button data-color="ghost">{isEnabled() ? "Disable" : "Enable"}</button>
+                            <label data-slot="model-toggle-label">
+                              <input
+                                type="checkbox"
+                                checked={isEnabled()}
+                                disabled={!userInfo()?.isAdmin}
+                                onChange={(e) => {
+                                  const form = e.currentTarget.closest("form")
+                                  if (form) form.requestSubmit()
+                                }}
+                              />
+                              <span></span>
+                            </label>
                           </form>
                         </td>
                       </tr>