diff --git a/packages/console/app/src/routes/workspace/[id]/index.tsx b/packages/console/app/src/routes/workspace/[id]/index.tsx index 1345bf40..46e6cf74 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 (
@@ -28,10 +20,8 @@ export default function () {
- - - - + +
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 1a9a322f..0c5b3a45 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); } + + [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 { - &[data-enabled="false"] { - opacity: 0.6; - } - &: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 13ec0cf4..f4f2f913 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 (

Models

-

Manage models for your workspace.

+

+ 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."} +

@@ -52,8 +57,7 @@ export function ModelSection() { Model - Status - Action + Enabled @@ -61,15 +65,25 @@ export function ModelSection() { {(modelId) => { const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(modelId)) return ( - + {modelId} - {isEnabled() ? "Enabled" : "Disabled"}
- +
diff --git a/packages/console/core/src/actor.ts b/packages/console/core/src/actor.ts index 88c5e4b5..e8d1b7a6 100644 --- a/packages/console/core/src/actor.ts +++ b/packages/console/core/src/actor.ts @@ -67,6 +67,11 @@ export namespace Actor { return actor as Extract } + export const assertAdmin = () => { + if (userRole() === "admin") return + throw new Error(`Expected admin user, got ${userRole()}`) + } + export function workspace() { const actor = use() if ("workspaceID" in actor.properties) { diff --git a/packages/console/core/src/model.ts b/packages/console/core/src/model.ts index ae636c4f..48d7e16c 100644 --- a/packages/console/core/src/model.ts +++ b/packages/console/core/src/model.ts @@ -40,13 +40,14 @@ export namespace ZenModel { export namespace Model { export const enable = fn(z.object({ model: z.string() }), ({ model }) => { - const workspaceID = Actor.workspace() + Actor.assertAdmin() return Database.use((db) => - db.delete(ModelTable).where(and(eq(ModelTable.workspaceID, workspaceID), eq(ModelTable.model, model))), + db.delete(ModelTable).where(and(eq(ModelTable.workspaceID, Actor.workspace()), eq(ModelTable.model, model))), ) }) export const disable = fn(z.object({ model: z.string() }), ({ model }) => { + Actor.assertAdmin() return Database.use((db) => db .insert(ModelTable) diff --git a/packages/console/core/src/provider.ts b/packages/console/core/src/provider.ts index 1f8c07b9..cf2040b5 100644 --- a/packages/console/core/src/provider.ts +++ b/packages/console/core/src/provider.ts @@ -20,8 +20,9 @@ export namespace Provider { provider: z.string().min(1).max(64), credentials: z.string(), }), - ({ provider, credentials }) => - Database.use((tx) => + async ({ provider, credentials }) => { + Actor.assertAdmin() + return Database.use((tx) => tx .insert(ProviderTable) .values({ @@ -36,14 +37,21 @@ export namespace Provider { timeDeleted: null, }, }), - ), + ) + }, ) - export const remove = fn(z.object({ provider: z.string() }), ({ provider }) => - Database.transaction((tx) => - tx - .delete(ProviderTable) - .where(and(eq(ProviderTable.provider, provider), eq(ProviderTable.workspaceID, Actor.workspace()))), - ), + export const remove = fn( + z.object({ + provider: z.string(), + }), + async ({ provider }) => { + Actor.assertAdmin() + return Database.transaction((tx) => + tx + .delete(ProviderTable) + .where(and(eq(ProviderTable.provider, provider), eq(ProviderTable.workspaceID, Actor.workspace()))), + ) + }, ) } diff --git a/packages/console/core/src/user.ts b/packages/console/core/src/user.ts index 38c8e5e3..1580783f 100644 --- a/packages/console/core/src/user.ts +++ b/packages/console/core/src/user.ts @@ -13,11 +13,6 @@ import { Key } from "./key" import { KeyTable } from "./schema/key.sql" export namespace User { - const assertAdmin = () => { - if (Actor.userRole() === "admin") return - throw new Error(`Expected admin user, got ${Actor.userRole()}`) - } - const assertNotSelf = (id: string) => { if (Actor.userID() !== id) return throw new Error(`Expected not self actor, got self actor`) @@ -65,7 +60,7 @@ export namespace User { role: z.enum(UserRole), }), async ({ email, role }) => { - assertAdmin() + Actor.assertAdmin() const workspaceID = Actor.workspace() // create user @@ -176,7 +171,7 @@ export namespace User { monthlyLimit: z.number().nullable(), }), async ({ id, role, monthlyLimit }) => { - assertAdmin() + Actor.assertAdmin() if (role === "member") assertNotSelf(id) return await Database.use((tx) => tx @@ -188,7 +183,7 @@ export namespace User { ) export const remove = fn(z.string(), async (id) => { - assertAdmin() + Actor.assertAdmin() assertNotSelf(id) return await Database.use((tx) =>