wip: zen

packages/console/app/src/routes/workspace/[id]/model-section.module.css

@@ -34,6 +34,12 @@
       color: var(--color-text);
       font-family: var(--font-mono);
       font-weight: 500;
+
+      div {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
     }
 
     &[data-slot="training-data"] {
@@ -88,8 +94,8 @@
       }
 
       /* Checked state - track */
-      input:checked+span {
-        background-color: #21AD0E;
+      input:checked + span {
+        background-color: #21ad0e;
         border-color: #148605;
 
         /* Checked state - handle */
@@ -103,7 +109,7 @@
         box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
       }
 
-      input:checked:hover+span {
+      input:checked:hover + span {
         box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
       }
 
@@ -112,16 +118,16 @@
         cursor: not-allowed;
       }
 
-      input:disabled+span {
+      input:disabled + span {
         opacity: 0.5;
         cursor: not-allowed;
       }
 
-      input:disabled:checked+span {
+      input:disabled:checked + span {
         opacity: 0.5;
       }
 
-      input:disabled~span:hover {
+      input:disabled ~ span:hover {
         box-shadow: none;
       }
     }
@@ -142,7 +148,6 @@
 
 @media (max-width: 40rem) {
   [data-slot="models-table-element"] {
-
     th,
     td {
       padding: var(--space-2) var(--space-3);
@@ -152,8 +157,7 @@
     th {
       &:nth-child(2)
 
-      /* Training Data */
-        {
+      /* Training Data */ {
         display: none;
       }
     }
@@ -161,10 +165,9 @@
     td {
       &:nth-child(2)
 
-      /* Training Data */
-        {
+      /* Training Data */ {
         display: none;
       }
     }
   }
-}
+}

packages/console/app/src/routes/workspace/[id]/model-section.tsx

@@ -77,7 +77,6 @@ export function ModelSection() {
             <table data-slot="models-table-element">
               <thead>
                 <tr>
-                  <th></th>
                   <th>Model</th>
                   <th></th>
                   <th>Enabled</th>
@@ -89,27 +88,29 @@ export function ModelSection() {
                     const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(id))
                     return (
                       <tr data-slot="model-row" data-disabled={!isEnabled()}>
-                        <td data-slot="model-icon">
-                          {(() => {
-                            switch (lab) {
-                              case "OpenAI":
-                                return <IconOpenAI width={16} height={16} />
-                              case "Anthropic":
-                                return <IconAnthropic width={16} height={16} />
-                              case "Moonshot AI":
-                                return <IconMoonshotAI width={16} height={16} />
-                              case "Z.ai":
-                                return <IconZai width={16} height={16} />
-                              case "Alibaba":
-                                return <IconAlibaba width={16} height={16} />
-                              case "xAI":
-                                return <IconXai width={16} height={16} />
-                              default:
-                                return <IconStealth width={16} height={16} />
-                            }
-                          })()}
+                        <td data-slot="model-name">
+                          <div>
+                            {(() => {
+                              switch (lab) {
+                                case "OpenAI":
+                                  return <IconOpenAI width={16} height={16} />
+                                case "Anthropic":
+                                  return <IconAnthropic width={16} height={16} />
+                                case "Moonshot AI":
+                                  return <IconMoonshotAI width={16} height={16} />
+                                case "Z.ai":
+                                  return <IconZai width={16} height={16} />
+                                case "Alibaba":
+                                  return <IconAlibaba width={16} height={16} />
+                                case "xAI":
+                                  return <IconXai width={16} height={16} />
+                                default:
+                                  return <IconStealth width={16} height={16} />
+                              }
+                            })()}
+                            <span>{name}</span>
+                          </div>
                         </td>
-                        <td data-slot="model-name">{name}</td>
                         <td data-slot="model-lab">{lab}</td>
                         <td data-slot="model-toggle">
                           <form action={updateModel} method="post">