konnospage.tsx91 lines · main
| 1 | import { apiOrigin } from '../../../../../../lib/env'; |
| 2 | import { ShellTokenPanel } from './shell-token-panel'; |
| 3 | |
| 4 | export const metadata = { title: 'connect' }; |
| 5 | export const dynamic = 'force-dynamic'; |
| 6 | |
| 7 | export default async function ConnectPage({ |
| 8 | params, |
| 9 | }: { |
| 10 | params: Promise<{ id: string }>; |
| 11 | }) { |
| 12 | const { id } = await params; |
| 13 | |
| 14 | return ( |
| 15 | <section className="flex flex-col gap-8"> |
| 16 | <header> |
| 17 | <h2 className="font-mono text-lg tracking-tight">connect</h2> |
| 18 | <p className="mt-1 font-mono text-xs text-[var(--color-text-muted)]"> |
| 19 | everything you need to reach this project from outside — psql, the briven CLI, |
| 20 | the SDK clients, or a custom HTTP integration. |
| 21 | </p> |
| 22 | </header> |
| 23 | |
| 24 | <section className="flex flex-col gap-3"> |
| 25 | <h3 className="font-mono text-sm text-[var(--color-text)]">project id</h3> |
| 26 | <div className="rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-3 font-mono text-xs"> |
| 27 | <code>{id}</code> |
| 28 | </div> |
| 29 | <p className="font-mono text-[10px] text-[var(--color-text-subtle)]"> |
| 30 | everything below is keyed by this id. share it with collaborators — it's |
| 31 | not a secret on its own. |
| 32 | </p> |
| 33 | </section> |
| 34 | |
| 35 | <section className="flex flex-col gap-3"> |
| 36 | <h3 className="font-mono text-sm text-[var(--color-text)]">api endpoints</h3> |
| 37 | <dl className="grid grid-cols-1 gap-x-3 sm:grid-cols-[160px_1fr] gap-y-2 rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-4 font-mono text-xs"> |
| 38 | <dt className="text-[var(--color-text-subtle)]">control plane</dt> |
| 39 | <dd> |
| 40 | <code>{apiOrigin}</code> |
| 41 | </dd> |
| 42 | |
| 43 | <dt className="text-[var(--color-text-subtle)]">invoke a function</dt> |
| 44 | <dd> |
| 45 | <code>POST {apiOrigin}/v1/projects/{id}/invoke</code> |
| 46 | </dd> |
| 47 | |
| 48 | <dt className="text-[var(--color-text-subtle)]">realtime subscribe</dt> |
| 49 | <dd> |
| 50 | <code>WSS {apiOrigin.replace(/^http/, 'ws')}/v1/projects/{id}/realtime</code> |
| 51 | </dd> |
| 52 | </dl> |
| 53 | <p className="font-mono text-[10px] text-[var(--color-text-subtle)]"> |
| 54 | authenticate with a project API key (<code>brk_</code> prefix) — issue one in |
| 55 | the api keys tab. SDK clients (<code>@briven/react</code>, <code>@briven/svelte</code>,{' '} |
| 56 | <code>@briven/vue</code>) take the key on construction. |
| 57 | </p> |
| 58 | </section> |
| 59 | |
| 60 | <section className="flex flex-col gap-3"> |
| 61 | <h3 className="font-mono text-sm text-[var(--color-text)]">postgres shell DSN</h3> |
| 62 | <p className="font-mono text-[11px] text-[var(--color-text-muted)]"> |
| 63 | short-lived (15 min) read/write DSN scoped to this project's schema. use it with |
| 64 | psql, pgcli, datagrip, or any tool that speaks postgres. logged in audit_logs; |
| 65 | the DSN itself is never persisted. |
| 66 | </p> |
| 67 | <ShellTokenPanel projectId={id} /> |
| 68 | </section> |
| 69 | |
| 70 | <section className="flex flex-col gap-3"> |
| 71 | <h3 className="font-mono text-sm text-[var(--color-text)]">cli usage</h3> |
| 72 | <pre className="overflow-x-auto rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-code-bg)] p-4 font-mono text-xs text-[var(--color-code-text)]"> |
| 73 | <code>{`# attach this existing project + wire the folder |
| 74 | briven connect ${id} |
| 75 | # (new projects use: briven setup my-app — not setup --project) |
| 76 | |
| 77 | # then deploy / watch |
| 78 | briven deploy |
| 79 | # or: briven dev |
| 80 | |
| 81 | # call a function |
| 82 | briven invoke listTodos |
| 83 | |
| 84 | # manual key path (if you already have a brk_ key) |
| 85 | # briven login --project ${id} --key <brk_…> |
| 86 | # briven link`}</code> |
| 87 | </pre> |
| 88 | </section> |
| 89 | </section> |
| 90 | ); |
| 91 | } |