bazilion 0.0.0

package/apps/web/src/routes/config/index.tsx

@@ -0,0 +1,315 @@
+import type { ProviderConfigEntry, ProviderConfigResponse } from '@bazilion/api-types'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import { ConfigTabs } from '../../components/ConfigTabs'
+import { FieldRow } from '../../components/FieldRow'
+import { daemonClient } from '../../lib/daemon-client'
+
+interface OpenAICodexStatus {
+  connected: boolean
+  expiresAt: number | null
+  accountId: string | null
+}
+
+interface ProvidersData {
+  providers: ProviderConfigEntry[]
+  openaiCodex: OpenAICodexStatus
+}
+
+const fetchProvidersData = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<ProvidersData> => {
+    const c = daemonClient()
+    const [{ providers }, openaiCodex] = await Promise.all([
+      c.get<ProviderConfigResponse>('/api/config/providers'),
+      c.get<OpenAICodexStatus>('/api/auth/openai'),
+    ])
+    return { providers, openaiCodex }
+  },
+)
+
+export const Route = createFileRoute('/config/')({
+  loader: () => fetchProvidersData(),
+  component: ProvidersPage,
+})
+
+function ProvidersPage() {
+  const { providers, openaiCodex } = Route.useLoaderData()
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <h1 className="font-serif text-3xl text-foreground mb-2">config</h1>
+      <ConfigTabs active="providers" />
+      <p className="text-muted-foreground text-sm mb-6">
+        Each card configures one LLM provider end to end: credentials (encrypted in the{' '}
+        <code className="font-mono">secrets</code> table), URLs and IDs (plaintext in the{' '}
+        <code className="font-mono">config</code> table), and the curated model list that
+        powers profile / agent dropdowns.
+      </p>
+      {providers.map((p) => (
+        <ProviderCard
+          key={p.id}
+          p={p}
+          openaiCodexStatus={p.id === 'openai-codex' ? openaiCodex : undefined}
+        />
+      ))}
+    </main>
+  )
+}
+
+function ProviderCard({
+  p,
+  openaiCodexStatus,
+}: {
+  p: ProviderConfigEntry
+  openaiCodexStatus: OpenAICodexStatus | undefined
+}) {
+  const router = useRouter()
+  const [enabled, setEnabled] = useState(p.enabled)
+  const [models, setModels] = useState(p.curated.join('\n'))
+  const [savingModels, setSavingModels] = useState(false)
+  const [modelStatus, setModelStatus] = useState<string | null>(null)
+
+  async function toggle(next: boolean) {
+    setEnabled(next)
+    try {
+      await fetch(`/api/config/providers/${encodeURIComponent(p.id)}/enabled`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ enabled: next }),
+      })
+      await router.invalidate()
+    } catch {
+      setEnabled(!next)
+    }
+  }
+
+  async function saveModels(e: React.FormEvent) {
+    e.preventDefault()
+    setSavingModels(true)
+    setModelStatus(null)
+    try {
+      const list = models
+        .split(/\r?\n/)
+        .map((s) => s.trim())
+        .filter(Boolean)
+      const res = await fetch(`/api/config/providers/${encodeURIComponent(p.id)}/models`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ models: list }),
+      })
+      if (!res.ok) {
+        const j = (await res.json().catch(() => ({}))) as { error?: string }
+        throw new Error(j.error ?? `${res.status} ${res.statusText}`)
+      }
+      setModelStatus('saved ✓')
+      await router.invalidate()
+    } catch (e) {
+      setModelStatus(`error: ${(e as Error).message}`)
+    } finally {
+      setSavingModels(false)
+    }
+  }
+
+  return (
+    <section className="rounded-lg border bg-card mb-3 overflow-hidden">
+      <header className="flex items-center gap-3 px-4 py-3">
+        <span className="font-mono font-semibold">{p.id}</span>
+        <span className="text-muted-foreground text-sm">· {p.displayName}</span>
+        <label className="flex items-center gap-1.5 text-xs uppercase tracking-wide font-semibold cursor-pointer">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onChange={(e) => toggle(e.target.checked)}
+            className="size-4"
+          />
+          <span className={enabled ? 'text-emerald-700' : 'text-muted-foreground'}>
+            {enabled ? 'enabled' : 'disabled'}
+          </span>
+        </label>
+        <span className="ml-auto text-xs text-muted-foreground">
+          {p.curated.length > 0 && <span>{p.curated.length} curated</span>}
+          {p.catalog.length > 0 && <span> · {p.catalog.length} catalog</span>}
+          {p.live && !p.live.error && <span> · {p.live.models.length} live</span>}
+        </span>
+      </header>
+
+      {enabled && (
+        <div className="border-t border-dashed px-4 py-3">
+          {p.hint && <p className="text-xs text-muted-foreground mb-2">{p.hint}</p>}
+
+          {p.id === 'openai-codex' && openaiCodexStatus && (
+            <OpenAICodexCard status={openaiCodexStatus} />
+          )}
+
+          {p.fields.length === 0 && p.envHint && p.id !== 'openai-codex' && (
+            <p className="text-xs text-muted-foreground">
+              Credentials come from the process env: <code className="font-mono">{p.envHint}</code>
+            </p>
+          )}
+
+          {p.fields.map((f) => (
+            <FieldRow key={f.envVar} field={f} />
+          ))}
+
+          <h4 className="mt-4 mb-1 text-xs uppercase tracking-wide text-muted-foreground">
+            curated models (one per line)
+          </h4>
+          <form onSubmit={saveModels}>
+            <textarea
+              value={models}
+              onChange={(e) => setModels(e.target.value)}
+              rows={Math.max(3, Math.min(8, models.split('\n').length))}
+              className="w-full rounded-md border bg-background px-2 py-1.5 font-mono text-sm outline-none focus:ring-2 focus:ring-ring/30"
+              placeholder={
+                p.catalog.length === 0 && !p.live
+                  ? 'Type model names one per line, e.g. qwen3-coder-30b'
+                  : 'Click catalog chips below, or type names one per line'
+              }
+            />
+            <div className="flex items-center gap-3 mt-2">
+              <button
+                type="submit"
+                disabled={savingModels}
+                className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
+              >
+                save models
+              </button>
+              {modelStatus && (
+                <span className="text-xs text-muted-foreground">{modelStatus}</span>
+              )}
+            </div>
+          </form>
+
+          {p.catalog.length > 0 && (
+            <>
+              <h4 className="mt-4 mb-1 text-xs uppercase tracking-wide text-muted-foreground">
+                catalog
+              </h4>
+              <ChipList
+                items={p.catalog}
+                onPick={(name) => setModels((m) => (m.includes(name) ? m : `${m}\n${name}`.trim()))}
+              />
+            </>
+          )}
+          {p.live && !p.live.error && p.live.models.length > 0 && (
+            <>
+              <h4 className="mt-4 mb-1 text-xs uppercase tracking-wide text-muted-foreground">
+                live
+              </h4>
+              <ChipList
+                items={p.live.models}
+                onPick={(name) => setModels((m) => (m.includes(name) ? m : `${m}\n${name}`.trim()))}
+              />
+            </>
+          )}
+          {p.live?.error && (
+            <p className="text-xs text-rose-700 mt-2">could not fetch: {p.live.error}</p>
+          )}
+        </div>
+      )}
+    </section>
+  )
+}
+
+function ChipList({ items, onPick }: { items: string[]; onPick: (name: string) => void }) {
+  return (
+    <div className="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto rounded-md border bg-background p-1.5">
+      {items.map((m) => (
+        <button
+          key={m}
+          type="button"
+          onClick={() => onPick(m)}
+          className="rounded border bg-card px-2 py-0.5 font-mono text-xs hover:border-primary hover:bg-accent"
+        >
+          {m}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function OpenAICodexCard({ status }: { status: OpenAICodexStatus }) {
+  const router = useRouter()
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+
+  async function connect() {
+    setBusy(true)
+    setErr(null)
+    try {
+      const res = await fetch('/api/auth/openai/login', { method: 'POST' })
+      if (!res.ok) {
+        const j = (await res.json().catch(() => ({}))) as { error?: string }
+        throw new Error(j.error ?? `${res.status} ${res.statusText}`)
+      }
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+  async function disconnect() {
+    setBusy(true)
+    setErr(null)
+    try {
+      await fetch('/api/auth/openai', { method: 'DELETE' })
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="rounded-md border bg-muted/30 p-3 mb-3">
+      {status.connected ? (
+        <>
+          <div className="flex flex-wrap gap-2 items-center mb-2">
+            <span className="rounded-full bg-emerald-100 text-emerald-800 px-2 py-0.5 text-xs font-semibold uppercase">
+              connected
+            </span>
+            {status.accountId && (
+              <span className="text-xs text-muted-foreground">
+                account <code className="font-mono">{status.accountId}</code>
+              </span>
+            )}
+            {status.expiresAt && (
+              <span className="text-xs text-muted-foreground">
+                token expires{' '}
+                {new Date(status.expiresAt).toISOString().replace(/\.\d+Z$/, 'Z')}
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={disconnect}
+            disabled={busy}
+            className="rounded-md border px-3 py-1.5 text-sm text-rose-700 hover:bg-rose-50 disabled:opacity-50"
+          >
+            disconnect
+          </button>
+        </>
+      ) : (
+        <>
+          <p className="text-xs text-muted-foreground mb-2">
+            Sign in with your ChatGPT account — the OAuth flow opens a new browser tab. The
+            loopback callback at <code className="font-mono">localhost:1455</code> only works
+            when you're using the web UI on the same machine as the daemon. For remote setups,
+            run <code className="font-mono">bazilion auth openai login</code> on the client.
+          </p>
+          <button
+            type="button"
+            onClick={connect}
+            disabled={busy}
+            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
+          >
+            {busy ? 'opening browser…' : 'Connect ChatGPT →'}
+          </button>
+        </>
+      )}
+      {err && <p className="text-sm text-rose-700 mt-2">{err}</p>}
+    </div>
+  )
+}

package/apps/web/src/routes/config/services.tsx

@@ -0,0 +1,49 @@
+import type { ServiceConfigResponse } from '@bazilion/api-types'
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { ConfigTabs } from '../../components/ConfigTabs'
+import { FieldRow } from '../../components/FieldRow'
+import { daemonClient } from '../../lib/daemon-client'
+
+const fetchServices = createServerFn({ method: 'GET' }).handler(() =>
+  daemonClient().get<ServiceConfigResponse>('/api/config/services'),
+)
+
+export const Route = createFileRoute('/config/services')({
+  loader: () => fetchServices(),
+  component: ServicesPage,
+})
+
+function ServicesPage() {
+  const { services } = Route.useLoaderData()
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <h1 className="font-serif text-3xl text-foreground mb-2">config</h1>
+      <ConfigTabs active="services" />
+
+      <p className="text-muted-foreground text-sm mb-6">
+        Configuration for non-LLM integrations — web search, crawlers, and similar. Fields
+        marked as secrets are encrypted in the <code className="font-mono">secrets</code>{' '}
+        table; plaintext URLs and IDs live in the <code className="font-mono">config</code>{' '}
+        table.
+      </p>
+
+      {services.length === 0 && (
+        <p className="text-muted-foreground italic">(no services registered)</p>
+      )}
+
+      {services.map((s) => (
+        <section key={s.id} className="rounded-lg border bg-card p-5 mb-3">
+          <header className="flex items-center gap-2 mb-3">
+            <span className="font-mono font-semibold">{s.id}</span>
+            <span className="text-muted-foreground text-sm">· {s.displayName}</span>
+          </header>
+          {s.hint && <p className="text-xs text-muted-foreground mb-2">{s.hint}</p>}
+          {s.fields.map((f) => (
+            <FieldRow key={f.envVar} field={f} />
+          ))}
+        </section>
+      ))}
+    </main>
+  )
+}

package/apps/web/src/routes/config/tokens.tsx

@@ -0,0 +1,192 @@
+import type { ListTokensResponse } from '@bazilion/api-types'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import { ConfigTabs } from '../../components/ConfigTabs'
+import { daemonClient } from '../../lib/daemon-client'
+
+const fetchTokens = createServerFn({ method: 'POST' })
+  .inputValidator((d: { all: boolean }) => d)
+  .handler(({ data }) =>
+    daemonClient().get<ListTokensResponse>(
+      `/api/tokens${data.all ? '?includeRevoked=1' : ''}`,
+    ),
+  )
+
+export const Route = createFileRoute('/config/tokens')({
+  validateSearch: (s: Record<string, unknown>): { all?: '1' } => ({
+    all: s.all === '1' ? '1' : undefined,
+  }),
+  loaderDeps: ({ search }) => ({ all: search.all === '1' }),
+  loader: ({ deps }) => fetchTokens({ data: deps }),
+  component: TokensPage,
+})
+
+function fmtTs(ts: number): string {
+  return new Date(ts).toISOString().slice(0, 16).replace('T', ' ')
+}
+
+function TokensPage() {
+  const { tokens } = Route.useLoaderData()
+  const { all } = Route.useSearch()
+  const includeRevoked = all === '1'
+  const router = useRouter()
+  const [label, setLabel] = useState('')
+  const [created, setCreated] = useState<string | null>(null)
+  const [err, setErr] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  async function mint(e: React.FormEvent) {
+    e.preventDefault()
+    setErr(null)
+    setBusy(true)
+    try {
+      const res = await fetch('/api/tokens', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ label }),
+      })
+      if (!res.ok) {
+        const j = (await res.json().catch(() => ({}))) as { error?: string }
+        throw new Error(j.error ?? `${res.status} ${res.statusText}`)
+      }
+      const body = (await res.json()) as { token: string }
+      setCreated(body.token)
+      setLabel('')
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function revoke(id: string) {
+    await fetch(`/api/tokens/${id}`, { method: 'DELETE' })
+    await router.invalidate()
+  }
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <h1 className="font-serif text-3xl text-foreground mb-2">config</h1>
+      <ConfigTabs active="tokens" />
+
+      <p className="text-muted-foreground text-sm mb-6">
+        Per-client credentials for the HTTP API and CLI. The row labelled{' '}
+        <code className="font-mono">bootstrap</code> is the loopback token in{' '}
+        <code className="font-mono">~/.bazilion/auth.json</code> — revoking it locks the local
+        CLI out, so it can't be revoked from this page. Mint additional tokens here for
+        Tailscale/LAN clients (mobile, remote machines); revoke any of those at any time.
+      </p>
+
+      <section className="rounded-lg border bg-card p-5 mb-6">
+        <h3 className="font-serif text-xl mb-3">Mint a new token</h3>
+        <form onSubmit={mint} className="flex gap-2 items-end mb-3">
+          <label className="text-sm">
+            Label
+            <input
+              type="text"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              required
+              placeholder="e.g. laptop-tailscale"
+              autoComplete="off"
+              className="block mt-1 rounded-md border bg-background px-3 py-2 text-sm w-72"
+            />
+          </label>
+          <button
+            type="submit"
+            disabled={busy}
+            className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50"
+          >
+            {busy ? 'creating…' : 'create'}
+          </button>
+        </form>
+        {created && (
+          <div className="rounded-md border border-amber-200 bg-amber-50 p-3">
+            <p className="text-xs text-amber-800 mb-1">
+              copy this token now — it is not recoverable later.
+            </p>
+            <pre className="font-mono text-xs whitespace-pre-wrap break-all">{created}</pre>
+          </div>
+        )}
+        {err && <p className="text-sm text-rose-700">{err}</p>}
+      </section>
+
+      <div className="mb-3">
+        <label className="text-sm flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={includeRevoked}
+            onChange={(e) => {
+              window.location.assign(e.target.checked ? '/config/tokens?all=1' : '/config/tokens')
+            }}
+          />
+          show revoked
+        </label>
+      </div>
+
+      <table className="w-full text-sm">
+        <thead className="text-left text-muted-foreground border-b">
+          <tr>
+            <th className="py-2">label</th>
+            <th>id</th>
+            <th>state</th>
+            <th>created</th>
+            <th>last used</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {tokens.length === 0 && (
+            <tr>
+              <td colSpan={6} className="py-6 text-center text-muted-foreground italic">
+                no tokens yet — mint one above
+              </td>
+            </tr>
+          )}
+          {tokens.map((t) => {
+            const isBootstrap = t.label === 'bootstrap'
+            return (
+              <tr key={t.id} className="border-b last:border-0 hover:bg-accent/30">
+                <td className="py-2">
+                  {t.label}
+                  {isBootstrap && (
+                    <span className="ml-2 text-[0.7em] uppercase tracking-wide text-muted-foreground">
+                      auth.json
+                    </span>
+                  )}
+                </td>
+                <td>
+                  <code className="font-mono text-xs">{t.id}</code>
+                </td>
+                <td>
+                  {t.revokedAt ? (
+                    <span className="text-muted-foreground">revoked</span>
+                  ) : (
+                    <span className="text-emerald-700">active</span>
+                  )}
+                </td>
+                <td className="text-muted-foreground text-xs">{fmtTs(t.createdAt)}</td>
+                <td className="text-muted-foreground text-xs">
+                  {t.lastUsedAt ? fmtTs(t.lastUsedAt) : '(never)'}
+                </td>
+                <td>
+                  {!t.revokedAt && !isBootstrap && (
+                    <button
+                      type="button"
+                      onClick={() => revoke(t.id)}
+                      className="rounded-md border px-2 py-1 text-xs text-rose-700 hover:bg-rose-50"
+                    >
+                      revoke
+                    </button>
+                  )}
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </main>
+  )
+}