@jonsoc/console-app 1.1.34

package/src/routes/workspace/[id]/model-section.tsx

@@ -0,0 +1,174 @@
+import { Model } from "@jonsoc/console-core/model.js"
+import { query, action, useParams, createAsync, json } from "@solidjs/router"
+import { createMemo, For, Show } from "solid-js"
+import { withActor } from "~/context/auth.withActor"
+import { ZenData } from "@jonsoc/console-core/model.js"
+import styles from "./model-section.module.css"
+import { querySessionInfo } from "../common"
+import {
+  IconAlibaba,
+  IconAnthropic,
+  IconGemini,
+  IconMiniMax,
+  IconMoonshotAI,
+  IconOpenAI,
+  IconStealth,
+  IconXai,
+  IconZai,
+} from "~/component/icon"
+
+const getModelLab = (modelId: string) => {
+  if (modelId.startsWith("claude")) return "Anthropic"
+  if (modelId.startsWith("gpt")) return "OpenAI"
+  if (modelId.startsWith("gemini")) return "Google"
+  if (modelId.startsWith("kimi")) return "Moonshot AI"
+  if (modelId.startsWith("glm")) return "Z.ai"
+  if (modelId.startsWith("qwen")) return "Alibaba"
+  if (modelId.startsWith("minimax")) return "MiniMax"
+  if (modelId.startsWith("grok")) return "xAI"
+  return "Stealth"
+}
+
+const getModelsInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return {
+      all: Object.entries(ZenData.list().models)
+        .filter(([id, _model]) => !["claude-3-5-haiku"].includes(id))
+        .filter(([id, _model]) => !id.startsWith("alpha-"))
+        .sort(([idA, modelA], [idB, modelB]) => {
+          const priority = ["big-pickle", "minimax", "grok", "claude", "gpt", "gemini"]
+          const getPriority = (id: string) => {
+            const index = priority.findIndex((p) => id.startsWith(p))
+            return index === -1 ? Infinity : index
+          }
+          const pA = getPriority(idA)
+          const pB = getPriority(idB)
+          if (pA !== pB) return pA - pB
+
+          const modelAName = Array.isArray(modelA) ? modelA[0].name : modelA.name
+          const modelBName = Array.isArray(modelB) ? modelB[0].name : modelB.name
+          return modelAName.localeCompare(modelBName)
+        })
+        .map(([id, model]) => ({ id, name: Array.isArray(model) ? model[0].name : model.name })),
+      disabled: await Model.listDisabled(),
+    }
+  }, workspaceID)
+}, "model.info")
+
+const updateModel = action(async (form: FormData) => {
+  "use server"
+  const model = form.get("model")?.toString()
+  if (!model) return { error: "Model is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  const enabled = form.get("enabled")?.toString() === "true"
+  return json(
+    withActor(async () => {
+      if (enabled) {
+        await Model.disable({ model })
+      } else {
+        await Model.enable({ model })
+      }
+    }, workspaceID),
+    { revalidate: getModelsInfo.key },
+  )
+}, "model.toggle")
+
+export function ModelSection() {
+  const params = useParams()
+  const modelsInfo = createAsync(() => getModelsInfo(params.id!))
+  const userInfo = createAsync(() => querySessionInfo(params.id!))
+
+  const modelsWithLab = createMemo(() => {
+    const info = modelsInfo()
+    if (!info) return []
+    return info.all.map((model) => ({
+      ...model,
+      lab: getModelLab(model.id),
+    }))
+  })
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Models</h2>
+        <p>
+          Manage which models workspace members can access. <a href="/docs/zen#pricing ">Learn more</a>.
+        </p>
+      </div>
+      <div data-slot="models-list">
+        <Show when={modelsInfo()}>
+          <div data-slot="models-table">
+            <table data-slot="models-table-element">
+              <thead>
+                <tr>
+                  <th>Model</th>
+                  <th></th>
+                  <th>Enabled</th>
+                </tr>
+              </thead>
+              <tbody>
+                <For each={modelsWithLab()}>
+                  {({ id, name, lab }) => {
+                    const isEnabled = createMemo(() => !modelsInfo()!.disabled.includes(id))
+                    return (
+                      <tr data-slot="model-row" data-disabled={!isEnabled()}>
+                        <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 "Google":
+                                  return <IconGemini 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} />
+                                case "MiniMax":
+                                  return <IconMiniMax width={16} height={16} />
+                                default:
+                                  return <IconStealth width={16} height={16} />
+                              }
+                            })()}
+                            <span>{name}</span>
+                          </div>
+                        </td>
+                        <td data-slot="model-lab">{lab}</td>
+                        <td data-slot="model-toggle">
+                          <form action={updateModel} method="post">
+                            <input type="hidden" name="model" value={id} />
+                            <input type="hidden" name="workspaceID" value={params.id} />
+                            <input type="hidden" name="enabled" value={isEnabled().toString()} />
+                            <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>
+                    )
+                  }}
+                </For>
+              </tbody>
+            </table>
+          </div>
+        </Show>
+      </div>
+    </section>
+  )
+}

package/src/routes/workspace/[id]/new-user-section.module.css

@@ -0,0 +1,143 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding: var(--space-6);
+  background-color: var(--color-bg-surface);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--border-radius-sm);
+
+  @media (max-width: 30rem) {
+    gap: var(--space-8);
+    padding: var(--space-4);
+  }
+
+  [data-component="feature-grid"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--space-6);
+
+    @media (max-width: 30rem) {
+      grid-template-columns: 1fr;
+      gap: var(--space-4);
+    }
+
+    [data-slot="feature"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+      padding: var(--space-4);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+
+      h3 {
+        font-size: var(--font-size-sm);
+        font-weight: 600;
+        margin: 0;
+        color: var(--color-text);
+        text-transform: uppercase;
+        letter-spacing: -0.025rem;
+      }
+
+      p {
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+        margin: 0;
+        color: var(--color-text-muted);
+      }
+    }
+  }
+
+  [data-component="api-key-highlight"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+
+    [data-slot="key-display"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+
+      [data-slot="key-container"] {
+        display: flex;
+        gap: var(--space-3);
+        padding: var(--space-4);
+        border: 2px solid var(--color-accent);
+        border-radius: var(--border-radius-sm);
+        align-items: center;
+
+        @media (max-width: 40rem) {
+          flex-direction: column;
+          gap: var(--space-3);
+          align-items: stretch;
+        }
+
+        [data-slot="key-value"] {
+          flex: 1;
+          font-family: var(--font-mono);
+          font-size: var(--font-size-sm);
+          color: var(--color-text);
+          background-color: var(--color-bg);
+          padding: var(--space-3);
+          border-radius: var(--border-radius-sm);
+          border: 1px solid var(--color-border);
+          word-break: break-all;
+          line-height: 1.4;
+
+          @media (max-width: 40rem) {
+            font-size: var(--font-size-xs);
+            padding: var(--space-2-5);
+          }
+        }
+
+        button {
+          display: flex;
+          align-items: center;
+          gap: var(--space-2);
+          padding: var(--space-3) var(--space-4);
+          font-size: var(--font-size-sm);
+          font-weight: 500;
+          white-space: nowrap;
+          min-width: 130px;
+
+          @media (max-width: 40rem) {
+            justify-content: center;
+            padding: var(--space-2-5) var(--space-3);
+            font-size: var(--font-size-xs);
+            min-width: 96px;
+          }
+        }
+      }
+    }
+  }
+
+  [data-component="next-steps"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+
+    ol {
+      margin: 0;
+      padding-left: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+      list-style-position: inside;
+
+      li {
+        font-size: var(--font-size-md);
+        line-height: 1.5;
+        color: var(--color-text-secondary);
+
+        code {
+          font-family: var(--font-mono);
+          font-size: var(--font-size-sm);
+          padding: var(--space-1) var(--space-2);
+          border: 1px solid var(--color-border);
+          border-radius: var(--border-radius-sm);
+          color: var(--color-text);
+        }
+      }
+    }
+  }
+}

package/src/routes/workspace/[id]/new-user-section.tsx

@@ -0,0 +1,104 @@
+import { query, useParams, createAsync } from "@solidjs/router"
+import { createMemo, createSignal, Show } from "solid-js"
+import { IconCopy, IconCheck } from "~/component/icon"
+import { Key } from "@jonsoc/console-core/key.js"
+import { Billing } from "@jonsoc/console-core/billing.js"
+import { withActor } from "~/context/auth.withActor"
+import styles from "./new-user-section.module.css"
+
+const getUsageInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(async () => {
+    return await Billing.usages()
+  }, workspaceID)
+}, "usage.list")
+
+const listKeys = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(() => Key.list(), workspaceID)
+}, "key.list")
+
+export function NewUserSection() {
+  const params = useParams()
+  const [copiedKey, setCopiedKey] = createSignal(false)
+  const keys = createAsync(() => listKeys(params.id!))
+  const usage = createAsync(() => getUsageInfo(params.id!))
+  const isNew = createMemo(() => {
+    const keysList = keys()
+    const usageList = usage()
+    return keysList?.length === 1 && (!usageList || usageList.length === 0)
+  })
+  const defaultKey = createMemo(() => {
+    const key = keys()?.at(-1)?.key
+    if (!key) return undefined
+    return {
+      actual: key,
+      masked: key.slice(0, 8) + "*".repeat(key.length - 12) + key.slice(-4),
+    }
+  })
+
+  return (
+    <Show when={isNew()}>
+      <div class={styles.root}>
+        <div data-component="feature-grid">
+          <div data-slot="feature">
+            <h3>Tested & Verified Models</h3>
+            <p>We've benchmarked and tested models specifically for coding agents to ensure the best performance.</p>
+          </div>
+          <div data-slot="feature">
+            <h3>Highest Quality</h3>
+            <p>Access models configured for optimal performance - no downgrades or routing to cheaper providers.</p>
+          </div>
+          <div data-slot="feature">
+            <h3>No Lock-in</h3>
+            <p>Use Zen with any coding agent, and continue using other providers with jonsoc whenever you want.</p>
+          </div>
+        </div>
+
+        <div data-component="api-key-highlight">
+          <Show when={defaultKey()}>
+            <div data-slot="key-display">
+              <div data-slot="key-container">
+                <code data-slot="key-value">{defaultKey()?.masked}</code>
+                <button
+                  data-color="primary"
+                  disabled={copiedKey()}
+                  onClick={async () => {
+                    await navigator.clipboard.writeText(defaultKey()?.actual ?? "")
+                    setCopiedKey(true)
+                    setTimeout(() => setCopiedKey(false), 2000)
+                  }}
+                  title="Copy API key"
+                >
+                  <Show
+                    when={copiedKey()}
+                    fallback={
+                      <>
+                        <IconCopy style={{ width: "16px", height: "16px" }} /> Copy Key
+                      </>
+                    }
+                  >
+                    <IconCheck style={{ width: "16px", height: "16px" }} /> Copied!
+                  </Show>
+                </button>
+              </div>
+            </div>
+          </Show>
+        </div>
+
+        <div data-component="next-steps">
+          <ol>
+            <li>Enable billing</li>
+            <li>
+              Run <code>jonsoc auth login</code> and select jonsoc
+            </li>
+            <li>Paste your API key</li>
+            <li>
+              Start jonsoc and run <code>/models</code> to select a model
+            </li>
+          </ol>
+        </div>
+      </div>
+    </Show>
+  )
+}

package/src/routes/workspace/[id]/provider-section.module.css

@@ -0,0 +1,138 @@
+.root {
+  [data-slot="providers-table"] {
+    overflow-x: auto;
+  }
+
+  [data-slot="providers-table-element"] {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+
+    thead {
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    th {
+      padding: var(--space-3) var(--space-4);
+      text-align: left;
+      font-weight: normal;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+
+      &:nth-child(1) {
+        width: 180px;
+      }
+
+      &:nth-child(3) {
+        width: 200px;
+      }
+    }
+
+    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="provider-name"] {
+        color: var(--color-text);
+        font-family: var(--font-mono);
+        font-weight: 500;
+      }
+
+      &[data-slot="provider-key"] {
+        text-align: left;
+        color: var(--color-text-secondary);
+
+        [data-slot="edit-form"] {
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-3);
+          max-width: 100%;
+
+          [data-slot="input-wrapper"] {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-1);
+            max-width: 100%;
+
+            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-size: var(--font-size-sm);
+              font-family: var(--font-mono);
+              width: 100%;
+              box-sizing: border-box;
+
+              &:focus {
+                outline: none;
+                border-color: var(--color-accent);
+              }
+
+              &::placeholder {
+                color: var(--color-text-disabled);
+              }
+            }
+
+            [data-slot="form-error"] {
+              color: var(--color-danger);
+              font-size: var(--font-size-sm);
+              line-height: 1.4;
+            }
+          }
+        }
+      }
+
+      &[data-slot="provider-action"] {
+        text-align: left;
+        font-family: var(--font-sans);
+        white-space: nowrap;
+
+        [data-slot="configured-actions"] {
+          display: flex;
+          gap: var(--space-2);
+
+          [data-slot="delete-form"] {
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
+          }
+
+          &:hover [data-slot="delete-form"] {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+
+        [data-slot="form-actions"] {
+          display: flex;
+          gap: var(--space-2);
+        }
+      }
+    }
+
+    tbody tr {
+      &:hover {
+        [data-slot="provider-action"] [data-slot="delete-form"] {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    @media (max-width: 40rem) {
+      th,
+      td {
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--font-size-xs);
+      }
+    }
+  }
+}