bazilion 0.0.0 → 0.1.0

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

@@ -1,315 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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>
-  )
-}