@jonsoc/console-app 1.1.34

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

@@ -0,0 +1,188 @@
+import { json, query, action, useParams, createAsync, useSubmission } from "@solidjs/router"
+import { createEffect, For, Show } from "solid-js"
+import { Provider } from "@jonsoc/console-core/provider.js"
+import { withActor } from "~/context/auth.withActor"
+import { createStore } from "solid-js/store"
+import styles from "./provider-section.module.css"
+
+const PROVIDERS = [
+  { name: "OpenAI", key: "openai", prefix: "sk-" },
+  { name: "Anthropic", key: "anthropic", prefix: "sk-ant-" },
+  { name: "Google Gemini", key: "google", prefix: "AI" },
+] as const
+
+type Provider = (typeof PROVIDERS)[number]
+
+function maskCredentials(credentials: string) {
+  return `${credentials.slice(0, 8)}...${credentials.slice(-8)}`
+}
+
+const removeProvider = action(async (form: FormData) => {
+  "use server"
+  const provider = form.get("provider")?.toString()
+  if (!provider) return { error: "Provider is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(await withActor(() => Provider.remove({ provider }), workspaceID), {
+    revalidate: listProviders.key,
+  })
+}, "provider.remove")
+
+const saveProvider = action(async (form: FormData) => {
+  "use server"
+  const provider = form.get("provider")?.toString()
+  const credentials = form.get("credentials")?.toString()
+  if (!provider) return { error: "Provider is required" }
+  if (!credentials) return { error: "API key is required" }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required" }
+  return json(
+    await withActor(
+      () =>
+        Provider.create({ provider, credentials })
+          .then(() => ({ error: undefined }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+    { revalidate: listProviders.key },
+  )
+}, "provider.save")
+
+const listProviders = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(() => Provider.list(), workspaceID)
+}, "provider.list")
+
+function ProviderRow(props: { provider: Provider }) {
+  const params = useParams()
+  const providers = createAsync(() => listProviders(params.id!))
+  const saveSubmission = useSubmission(saveProvider, ([fd]) => fd.get("provider")?.toString() === props.provider.key)
+  const removeSubmission = useSubmission(
+    removeProvider,
+    ([fd]) => fd.get("provider")?.toString() === props.provider.key,
+  )
+  const [store, setStore] = createStore({ editing: false })
+
+  let input: HTMLInputElement
+
+  const providerData = () => providers()?.find((p) => p.provider === props.provider.key)
+
+  createEffect(() => {
+    if (!saveSubmission.pending && saveSubmission.result && !saveSubmission.result.error) {
+      hide()
+    }
+  })
+
+  function show() {
+    while (true) {
+      saveSubmission.clear()
+      if (!saveSubmission.result) break
+    }
+    setStore("editing", true)
+    setTimeout(() => input?.focus(), 0)
+  }
+
+  function hide() {
+    setStore("editing", false)
+  }
+
+  return (
+    <tr data-slot="provider-row">
+      <td data-slot="provider-name">{props.provider.name}</td>
+      <td data-slot="provider-key">
+        <Show
+          when={store.editing}
+          fallback={<span>{providerData() ? maskCredentials(providerData()!.credentials) : "-"}</span>}
+        >
+          <form id={`provider-form-${props.provider.key}`} action={saveProvider} method="post" data-slot="edit-form">
+            <div data-slot="input-wrapper">
+              <input
+                ref={(r) => (input = r)}
+                name="credentials"
+                type="text"
+                placeholder={`Enter ${props.provider.name} API key (${props.provider.prefix}...)`}
+                autocomplete="off"
+                data-form-type="other"
+                data-lpignore="true"
+              />
+              <Show when={saveSubmission.result && saveSubmission.result.error}>
+                {(err) => <div data-slot="form-error">{err()}</div>}
+              </Show>
+            </div>
+            <input type="hidden" name="provider" value={props.provider.key} />
+            <input type="hidden" name="workspaceID" value={params.id} />
+          </form>
+        </Show>
+      </td>
+      <td data-slot="provider-action">
+        <Show
+          when={store.editing}
+          fallback={
+            <Show
+              when={!!providerData()}
+              fallback={
+                <button data-color="ghost" onClick={() => show()}>
+                  Configure
+                </button>
+              }
+            >
+              <div data-slot="configured-actions">
+                <button data-color="ghost" onClick={() => show()}>
+                  Edit
+                </button>
+                <form action={removeProvider} method="post" data-slot="delete-form">
+                  <input type="hidden" name="provider" value={props.provider.key} />
+                  <input type="hidden" name="workspaceID" value={params.id} />
+                  <button data-color="ghost" type="submit" disabled={removeSubmission.pending}>
+                    Delete
+                  </button>
+                </form>
+              </div>
+            </Show>
+          }
+        >
+          <div data-slot="form-actions">
+            <button
+              type="submit"
+              data-color="ghost"
+              disabled={saveSubmission.pending}
+              form={`provider-form-${props.provider.key}`}
+            >
+              {saveSubmission.pending ? "Saving..." : "Save"}
+            </button>
+            <Show when={!saveSubmission.pending}>
+              <button type="reset" data-color="ghost" onClick={() => hide()}>
+                Cancel
+              </button>
+            </Show>
+          </div>
+        </Show>
+      </td>
+    </tr>
+  )
+}
+
+export function ProviderSection() {
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Bring Your Own Key</h2>
+        <p>Configure your own API keys from AI providers.</p>
+      </div>
+      <div data-slot="providers-table">
+        <table data-slot="providers-table-element">
+          <thead>
+            <tr>
+              <th>Provider</th>
+              <th>API Key</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={PROVIDERS}>{(provider) => <ProviderRow provider={provider} />}</For>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}

package/src/routes/workspace/[id]/settings/index.tsx

@@ -0,0 +1,11 @@
+import { SettingsSection } from "./settings-section"
+
+export default function () {
+  return (
+    <div data-page="workspace-[id]">
+      <div data-slot="sections">
+        <SettingsSection />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,94 @@
+.root {
+  max-width: 40rem;
+
+  [data-slot="setting"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+
+    p {
+      line-height: 1.2;
+      margin: 0;
+      color: var(--color-text-muted);
+    }
+
+    [data-slot="value-with-action"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-3);
+
+      @media (max-width: 30rem) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-2);
+      }
+    }
+
+    [data-slot="current-value"] {
+      color: var(--color-text);
+      line-height: 1.4;
+      margin: 0;
+    }
+
+    > button {
+      align-self: flex-start;
+    }
+  }
+
+  [data-slot="create-form"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+
+    [data-slot="input-container"] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--space-2);
+
+      @media (max-width: 30rem) {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      button {
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+    }
+
+    input {
+      flex: 1;
+      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);
+      line-height: 1.5;
+      min-width: 0;
+
+      &:focus {
+        outline: none;
+        border-color: var(--color-accent);
+        box-shadow: 0 0 0 3px var(--color-accent-alpha);
+      }
+
+      &::placeholder {
+        color: var(--color-text-disabled);
+      }
+    }
+
+    > button[type="reset"] {
+      align-self: flex-start;
+    }
+
+    [data-slot="form-error"] {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin-top: calc(var(--space-1) * -1);
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+import { json, action, useParams, useSubmission, createAsync, query } from "@solidjs/router"
+import { createEffect, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { withActor } from "~/context/auth.withActor"
+import { Workspace } from "@jonsoc/console-core/workspace.js"
+import styles from "./settings-section.module.css"
+import { Database, eq } from "@jonsoc/console-core/drizzle/index.js"
+import { WorkspaceTable } from "@jonsoc/console-core/schema/workspace.sql.js"
+
+const getWorkspaceInfo = query(async (workspaceID: string) => {
+  "use server"
+  return withActor(
+    () =>
+      Database.use((tx) =>
+        tx
+          .select({
+            id: WorkspaceTable.id,
+            name: WorkspaceTable.name,
+            slug: WorkspaceTable.slug,
+          })
+          .from(WorkspaceTable)
+          .where(eq(WorkspaceTable.id, workspaceID))
+          .then((rows) => rows[0] || null),
+      ),
+    workspaceID,
+  )
+}, "workspace.get")
+
+const updateWorkspace = action(async (form: FormData) => {
+  "use server"
+  const name = form.get("name")?.toString().trim()
+  if (!name) return { error: "Workspace name is required." }
+  if (name.length > 255) return { error: "Name must be 255 characters or less." }
+  const workspaceID = form.get("workspaceID")?.toString()
+  if (!workspaceID) return { error: "Workspace ID is required." }
+  return json(
+    await withActor(
+      () =>
+        Workspace.update({ name })
+          .then(() => ({ error: undefined }))
+          .catch((e) => ({ error: e.message as string })),
+      workspaceID,
+    ),
+  )
+}, "workspace.update")
+
+export function SettingsSection() {
+  const params = useParams()
+  const workspaceInfo = createAsync(() => getWorkspaceInfo(params.id!))
+  const submission = useSubmission(updateWorkspace)
+  const [store, setStore] = createStore({ show: false })
+
+  let input: HTMLInputElement
+
+  createEffect(() => {
+    if (!submission.pending && submission.result && !submission.result.error) {
+      hide()
+    }
+  })
+
+  function show() {
+    while (true) {
+      submission.clear()
+      if (!submission.result) break
+    }
+    setStore("show", true)
+    input.focus()
+  }
+
+  function hide() {
+    setStore("show", false)
+  }
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Settings</h2>
+        <p>Update your workspace name and preferences.</p>
+      </div>
+      <div data-slot="section-content">
+        <div data-slot="setting">
+          <p>Workspace name</p>
+          <Show
+            when={!store.show}
+            fallback={
+              <form action={updateWorkspace} method="post" data-slot="create-form">
+                <div data-slot="input-container">
+                  <input
+                    required
+                    ref={(r) => (input = r)}
+                    data-component="input"
+                    name="name"
+                    type="text"
+                    placeholder="Workspace name"
+                    value={workspaceInfo()?.name ?? "Default"}
+                  />
+                  <input type="hidden" name="workspaceID" value={params.id} />
+                  <button type="submit" data-color="primary" disabled={submission.pending}>
+                    {submission.pending ? "Updating..." : "Save"}
+                  </button>
+                  <button type="reset" data-color="ghost" onClick={() => hide()}>
+                    Cancel
+                  </button>
+                </div>
+                <Show when={submission.result && submission.result.error}>
+                  {(err) => <div data-slot="form-error">{err()}</div>}
+                </Show>
+              </form>
+            }
+          >
+            <div data-slot="value-with-action">
+              <p data-slot="current-value">{workspaceInfo()?.name}</p>
+              <button data-color="primary" onClick={() => show()}>
+                Edit
+              </button>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,185 @@
+.root {
+  /* Empty state */
+  [data-component="empty-state"] {
+    padding: var(--space-20) var(--space-6);
+    text-align: center;
+    border: 1px dashed var(--color-border);
+    border-radius: var(--border-radius-sm);
+
+    p {
+      font-size: var(--font-size-sm);
+      color: var(--color-text-muted);
+    }
+  }
+
+  /* Table container */
+  [data-slot="usage-table"] {
+    overflow-x: auto;
+  }
+
+  /* Table element */
+  [data-slot="usage-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;
+    }
+
+    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="usage-date"] {
+        color: var(--color-text-muted);
+      }
+
+      &[data-slot="usage-model"] {
+        font-family: var(--font-sans);
+        color: var(--color-text-secondary);
+        max-width: 200px;
+        word-break: break-word;
+      }
+
+      &[data-slot="usage-cost"] {
+        color: var(--color-text-muted);
+      }
+
+      [data-slot="tokens-with-breakdown"] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
+
+      [data-slot="breakdown-button"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: transparent;
+        border: none;
+        color: var(--color-text-muted);
+        cursor: pointer;
+        transition: color 0.15s ease;
+
+        &:hover {
+          color: var(--color-text);
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      [data-slot="breakdown-popup"] {
+        position: absolute;
+        left: 0;
+        top: 100%;
+        margin-top: var(--space-2);
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        padding: var(--space-2);
+        z-index: 10;
+        min-width: 180px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        font-size: var(--font-size-xs);
+
+        @media (prefers-color-scheme: dark) {
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+  }
+
+  /* Pagination */
+  [data-slot="pagination"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding: var(--space-4) 0;
+    border-top: 1px solid var(--color-border-muted);
+    margin-top: var(--space-2);
+
+    button {
+      padding: var(--space-2) var(--space-4);
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text);
+      font-size: var(--font-size-sm);
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      svg {
+        width: 16px;
+        height: 16px;
+        stroke-width: 2;
+      }
+
+      &:hover:not(:disabled) {
+        background: var(--color-bg-tertiary);
+        border-color: var(--color-border-hover);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  /* Mobile responsive */
+  @media (max-width: 40rem) {
+    [data-slot="usage-table-element"] {
+      th,
+      td {
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--font-size-xs);
+      }
+
+      /* Hide Model column on mobile */
+      th:nth-child(2),
+      td:nth-child(2) {
+        display: none;
+      }
+    }
+  }
+
+  /* Breakdown popup content */
+  [data-slot="breakdown-row"] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-1) 0;
+  }
+
+  [data-slot="breakdown-label"] {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+
+  [data-slot="breakdown-value"] {
+    color: var(--color-text);
+    font-weight: 500;
+    font-size: var(--font-size-xs);
+  }
+}