feat(web): dashboard, wizard, server detail, WS build stream, install snippets

apps/web/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { apiFetch } from '@/lib/api';
+import { StatusPill } from '@/components/status-pill';
+import { Button } from '@/components/ui/button';
+
+interface ServerRow {
+  id: string;
+  name: string;
+  slug: string;
+  status: string;
+  publicUrl: string | null;
+  createdAt: string;
+}
+
+export default function Overview() {
+  const [servers, setServers] = useState<ServerRow[] | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => {
+    apiFetch<{ servers: ServerRow[] }>('/v1/servers')
+      .then((r) => setServers(r.servers))
+      .catch((e) => setErr((e as Error).message));
+  }, []);
+
+  if (err?.includes('401')) {
+    if (typeof window !== 'undefined') {
+      window.location.href = '/login';
+    }
+    return null;
+  }
+
+  const total = servers?.length ?? 0;
+  const live = servers?.filter((s) => s.status === 'live').length ?? 0;
+
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-8">
+      <div className="flex items-baseline justify-between">
+        <div>
+          <h1 className="text-[22px] font-semibold tracking-tight">Overview</h1>
+          <p className="mt-1 text-[13px] text-[--color-fg-muted]">
+            Your MCP servers, calls and recent builds.
+          </p>
+        </div>
+        <Link
+          href="/servers/new"
+          className="inline-flex h-8 items-center gap-2 rounded-md bg-[--color-accent] px-3 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+        >
+          + New server
+        </Link>
+      </div>
+
+      <div className="mt-6 grid gap-3 md:grid-cols-3">
+        <Card label="Servers" value={total.toString()} sub={`${live} live`} />
+        <Card label="Calls this period" value="0" sub="of 100,000" />
+        <Card label="Plan" value="Hobby" sub="Upgrade in Settings" />
+      </div>
+
+      <div className="mt-10">
+        <div className="flex items-center justify-between">
+          <h2 className="text-[14px] font-semibold tracking-tight">Recent servers</h2>
+          <Link href="/servers" className="text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]">
+            View all →
+          </Link>
+        </div>
+        <div className="panel mt-3">
+          {servers === null && (
+            <div className="px-4 py-3 text-[12.5px] text-[--color-fg-muted]">Loading…</div>
+          )}
+          {servers && servers.length === 0 && (
+            <div className="px-4 py-12 text-center">
+              <p className="text-[14px] text-[--color-fg]">No servers yet.</p>
+              <p className="mt-1 text-[12.5px] text-[--color-fg-muted]">
+                Describe the tool you want — we host the server.
+              </p>
+              <Link href="/servers/new" className="mt-4 inline-block">
+                <Button variant="primary" size="md">
+                  Create your first server
+                </Button>
+              </Link>
+            </div>
+          )}
+          {servers && servers.length > 0 && (
+            <table className="w-full text-[12.5px]">
+              <thead className="border-b border-[--color-border] text-[--color-fg-subtle]">
+                <tr>
+                  <th className="px-4 py-2 text-left font-medium">Name</th>
+                  <th className="px-4 py-2 text-left font-medium">Slug</th>
+                  <th className="px-4 py-2 text-left font-medium">Status</th>
+                  <th className="px-4 py-2 text-left font-medium">URL</th>
+                </tr>
+              </thead>
+              <tbody>
+                {servers.slice(0, 5).map((s) => (
+                  <tr key={s.id} className="border-b border-[--color-border] last:border-0 hover:bg-[--color-bg-subtle]">
+                    <td className="px-4 py-2.5">
+                      <Link href={`/servers/${s.id}`} className="font-medium hover:text-[--color-accent]">
+                        {s.name}
+                      </Link>
+                    </td>
+                    <td className="mono px-4 py-2.5 text-[--color-fg-muted]">{s.slug}</td>
+                    <td className="px-4 py-2.5">
+                      <StatusPill status={s.status as never} />
+                    </td>
+                    <td className="mono px-4 py-2.5 text-[--color-fg-muted]">
+                      {s.publicUrl ?? '—'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Card({ label, value, sub }: { label: string; value: string; sub: string }) {
+  return (
+    <div className="panel p-4">
+      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{label}</div>
+      <div className="mt-1.5 text-[24px] font-semibold tracking-tight">{value}</div>
+      <div className="mt-1 text-[12px] text-[--color-fg-muted]">{sub}</div>
+    </div>
+  );
+}

apps/web/app/(dashboard)/layout.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link';
+import { Logo } from '@/components/logo';
+import { LayoutGrid, Server, Settings, FileClock } from 'lucide-react';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/85 backdrop-blur-md">
+        <div className="mx-auto flex h-12 max-w-7xl items-center justify-between px-6">
+          <div className="flex items-center gap-6">
+            <Logo />
+            <nav className="flex items-center gap-1">
+              <NavLink href="/dashboard" icon={<LayoutGrid size={13} />}>
+                Overview
+              </NavLink>
+              <NavLink href="/servers" icon={<Server size={13} />}>
+                Servers
+              </NavLink>
+              <NavLink href="/audit" icon={<FileClock size={13} />}>
+                Audit
+              </NavLink>
+              <NavLink href="/settings" icon={<Settings size={13} />}>
+                Settings
+              </NavLink>
+            </nav>
+          </div>
+          <Link
+            href="/servers/new"
+            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-[--color-accent] px-2.5 text-[12px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+          >
+            + New server
+          </Link>
+        </div>
+      </header>
+      <main className="flex-1 bg-[--color-bg]">{children}</main>
+    </div>
+  );
+}
+
+function NavLink({
+  href,
+  children,
+  icon,
+}: {
+  href: string;
+  children: React.ReactNode;
+  icon: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className="inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[12.5px] text-[--color-fg-muted] transition-colors hover:bg-[--color-bg-subtle] hover:text-[--color-fg]"
+    >
+      {icon}
+      {children}
+    </Link>
+  );
+}

apps/web/app/(dashboard)/servers/[id]/page.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { apiFetch } from '@/lib/api';
+import { StatusPill } from '@/components/status-pill';
+import { CodeBlock } from '@/components/code-block';
+import { InstallSnippets } from '@/components/install-snippets';
+import { StreamingLogs } from '@/components/streaming-logs';
+import { Button } from '@/components/ui/button';
+import { Textarea, Label } from '@/components/input';
+import { cn } from '@/lib/cn';
+import type { ToolSpec } from '@bmm/types';
+
+interface ServerDetail {
+  id: string;
+  name: string;
+  slug: string;
+  status: string;
+  publicUrl: string | null;
+  toolsSchema: ToolSpec[] | null;
+  currentVersion: number;
+  oauthEnabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface BuildSummary {
+  id: string;
+  version: number;
+  status: string;
+  startedAt: string | null;
+  finishedAt: string | null;
+  errorMessage: string | null;
+}
+
+type Tab = 'overview' | 'tools' | 'logs' | 'metrics' | 'secrets' | 'iterate';
+
+export default function ServerDetailPage() {
+  const params = useParams<{ id: string }>();
+  const [server, setServer] = useState<ServerDetail | null>(null);
+  const [builds, setBuilds] = useState<BuildSummary[]>([]);
+  const [tab, setTab] = useState<Tab>('overview');
+  const [iteratePrompt, setIteratePrompt] = useState('');
+  const [latestBuildId, setLatestBuildId] = useState<string | null>(null);
+
+  async function refresh() {
+    const r = await apiFetch<{ server: ServerDetail; builds: BuildSummary[] }>(
+      `/v1/servers/${params.id}`,
+    );
+    setServer(r.server);
+    setBuilds(r.builds);
+    if (r.builds.length > 0 && !latestBuildId) {
+      setLatestBuildId(r.builds[0]!.id);
+    }
+  }
+
+  useEffect(() => {
+    refresh();
+    const t = setInterval(refresh, 4000);
+    return () => clearInterval(t);
+  }, [params.id]);
+
+  async function onIterate() {
+    if (!server) return;
+    const res = await apiFetch<{ build: { id: string } }>(
+      `/v1/servers/${server.id}/iterate`,
+      { method: 'POST', body: JSON.stringify({ prompt: iteratePrompt, secrets: {} }) },
+    );
+    setLatestBuildId(res.build.id);
+    setIteratePrompt('');
+    setTab('logs');
+  }
+
+  if (!server) {
+    return (
+      <div className="mx-auto max-w-7xl px-6 py-8 text-[12.5px] text-[--color-fg-muted]">Loading…</div>
+    );
+  }
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'tools', label: 'Tools' },
+    { id: 'logs', label: 'Logs' },
+    { id: 'metrics', label: 'Metrics' },
+    { id: 'secrets', label: 'Secrets' },
+    { id: 'iterate', label: 'Iterate' },
+  ];
+
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-8">
+      <div className="flex items-baseline justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2.5">
+            <h1 className="text-[22px] font-semibold tracking-tight">{server.name}</h1>
+            <StatusPill status={server.status as never} />
+          </div>
+          <div className="mt-1 flex items-center gap-3 text-[12.5px] text-[--color-fg-muted]">
+            <span className="mono">{server.slug}</span>
+            <span>·</span>
+            <span>v{server.currentVersion}</span>
+            {server.publicUrl && (
+              <>
+                <span>·</span>
+                <a
+                  href={`${server.publicUrl}/mcp`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mono hover:text-[--color-fg]"
+                >
+                  {server.publicUrl}/mcp
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6 flex gap-1 border-b border-[--color-border]">
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => setTab(t.id)}
+            className={cn(
+              'relative px-3 py-2 text-[12.5px] transition-colors duration-200 ease-out',
+              tab === t.id
+                ? 'text-[--color-fg]'
+                : 'text-[--color-fg-muted] hover:text-[--color-fg]',
+            )}
+          >
+            {t.label}
+            {tab === t.id && (
+              <span className="absolute inset-x-0 -bottom-px h-px bg-[--color-fg]" />
+            )}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-6">
+        {tab === 'overview' && (
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="panel p-4">
+              <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+                Endpoint
+              </div>
+              <div className="mt-3">
+                {server.publicUrl ? (
+                  <CodeBlock code={`${server.publicUrl}/mcp`} />
+                ) : (
+                  <div className="text-[12.5px] text-[--color-fg-muted]">Not deployed yet.</div>
+                )}
+              </div>
+              <div className="mt-4 flex items-center gap-2 text-[12px] text-[--color-fg-muted]">
+                <span className="size-1.5 rounded-full bg-emerald-400" />
+                OAuth 2.1 enforced · Streamable HTTP
+              </div>
+            </div>
+            <div className="panel p-4">
+              <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+                Builds
+              </div>
+              <div className="mt-3 space-y-2">
+                {builds.slice(0, 5).map((b) => (
+                  <div key={b.id} className="flex items-center justify-between text-[12.5px]">
+                    <span className="mono text-[--color-fg-muted]">v{b.version}</span>
+                    <StatusPill status={b.status as never} />
+                    <span className="mono text-[11px] text-[--color-fg-subtle]">
+                      {b.startedAt ? new Date(b.startedAt).toLocaleString() : '—'}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            {server.publicUrl && (
+              <div className="panel p-4 md:col-span-2">
+                <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+                  Install
+                </div>
+                <div className="mt-3">
+                  <InstallSnippets
+                    input={{ name: server.name, slug: server.slug, publicUrl: server.publicUrl }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === 'tools' && (
+          <div className="panel p-4">
+            {!server.toolsSchema || server.toolsSchema.length === 0 ? (
+              <div className="text-[12.5px] text-[--color-fg-muted]">No tools yet.</div>
+            ) : (
+              <div className="space-y-3">
+                {server.toolsSchema.map((tool) => (
+                  <div key={tool.name} className="rounded-md border border-[--color-border] p-3">
+                    <div className="flex items-baseline gap-2">
+                      <span className="mono text-[13px] font-semibold">{tool.name}</span>
+                    </div>
+                    <p className="mt-1 text-[12.5px] text-[--color-fg-muted]">{tool.description}</p>
+                    {Object.keys(tool.inputSchema ?? {}).length > 0 && (
+                      <div className="mt-2">
+                        <CodeBlock
+                          label="input schema"
+                          code={JSON.stringify(tool.inputSchema, null, 2)}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === 'logs' && (
+          latestBuildId ? (
+            <StreamingLogs buildId={latestBuildId} />
+          ) : (
+            <div className="panel p-4 text-[12.5px] text-[--color-fg-muted]">
+              No builds to stream yet.
+            </div>
+          )
+        )}
+
+        {tab === 'metrics' && (
+          <div className="panel p-4">
+            <div className="grid gap-4 md:grid-cols-3">
+              <Metric label="Calls (24h)" value="0" />
+              <Metric label="P95 latency" value="—" />
+              <Metric label="Error rate" value="0%" />
+            </div>
+            <p className="mt-4 text-[12px] text-[--color-fg-subtle]">
+              Live metrics begin streaming after the first tool call.
+            </p>
+          </div>
+        )}
+
+        {tab === 'secrets' && (
+          <div className="panel p-4 text-[12.5px] text-[--color-fg-muted]">
+            Secrets are AES-256-GCM encrypted at rest. They are injected as environment variables
+            into your container and are never echoed back. Use the wizard or CLI to rotate them.
+          </div>
+        )}
+
+        {tab === 'iterate' && (
+          <div className="panel p-4">
+            <Label hint="A new build will be queued; rolling deploy keeps current version live until ready.">
+              Extend the server
+            </Label>
+            <Textarea
+              rows={4}
+              className="mt-2"
+              value={iteratePrompt}
+              onChange={(e) => setIteratePrompt(e.target.value)}
+              placeholder="Add a tool: create_page that POSTs to /v1/pages with title and body."
+            />
+            <div className="mt-3 flex justify-end">
+              <Button
+                variant="primary"
+                size="md"
+                disabled={iteratePrompt.length < 10}
+                onClick={onIterate}
+              >
+                Queue rebuild →
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">{label}</div>
+      <div className="mt-1 text-[22px] font-semibold tracking-tight">{value}</div>
+    </div>
+  );
+}

apps/web/app/(dashboard)/servers/new/page.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { apiFetch } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input, Label, Textarea } from '@/components/input';
+import { StreamingLogs } from '@/components/streaming-logs';
+import { InstallSnippets } from '@/components/install-snippets';
+import { CodeBlock } from '@/components/code-block';
+
+const EXAMPLE_PROMPTS = [
+  'Read-only Postgres reader for the users and orders tables at db.example.com',
+  'Search and read pages from our Notion workspace via the Notion API',
+  'Wrap our internal HTTP API at api.acme.com — endpoints /search and /lookup',
+  'Stripe charges and customers (read-only)',
+];
+
+type Step = 'prompt' | 'building' | 'done';
+
+interface BuildResult {
+  serverId: string;
+  publicUrl: string | null;
+}
+
+export default function NewServerPage() {
+  const router = useRouter();
+  const [step, setStep] = useState<Step>('prompt');
+  const [name, setName] = useState('');
+  const [slug, setSlug] = useState('');
+  const [prompt, setPrompt] = useState('');
+  const [secretRows, setSecretRows] = useState<{ key: string; value: string }[]>([{ key: '', value: '' }]);
+  const [error, setError] = useState<string | null>(null);
+  const [buildId, setBuildId] = useState<string | null>(null);
+  const [serverId, setServerId] = useState<string | null>(null);
+  const [result, setResult] = useState<BuildResult | null>(null);
+
+  const trySlug = (n: string) =>
+    n.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 32);
+
+  async function submit() {
+    setError(null);
+    if (!name || !slug || prompt.length < 10) {
+      setError('Name, slug and a prompt of at least 10 characters are required.');
+      return;
+    }
+    const secrets: Record<string, string> = {};
+    for (const row of secretRows) {
+      if (row.key && row.value) secrets[row.key.trim()] = row.value;
+    }
+    try {
+      const res = await apiFetch<{ server: { id: string }; build: { id: string } }>(
+        '/v1/servers',
+        { method: 'POST', body: JSON.stringify({ name, slug, prompt, secrets }) },
+      );
+      setBuildId(res.build.id);
+      setServerId(res.server.id);
+      setStep('building');
+    } catch (e) {
+      const detail = (e as { detail?: { error?: string } }).detail;
+      setError(detail?.error ?? (e as Error).message);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-8">
+      <div className="flex items-baseline justify-between">
+        <h1 className="text-[22px] font-semibold tracking-tight">New MCP server</h1>
+        <div className="mono text-[11px] tracking-wider text-[--color-fg-subtle]">
+          STEP {step === 'prompt' ? '1' : step === 'building' ? '2' : '3'} / 3
+        </div>
+      </div>
+
+      {step === 'prompt' && (
+        <div className="mt-7 space-y-5">
+          <div className="space-y-1.5">
+            <Label htmlFor="prompt">Describe your tool</Label>
+            <Textarea
+              id="prompt"
+              rows={5}
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="A sentence is enough. Mention APIs, secrets, scopes, expected tool names."
+            />
+            <div className="flex flex-wrap gap-1.5">
+              {EXAMPLE_PROMPTS.map((p) => (
+                <button
+                  type="button"
+                  key={p}
+                  onClick={() => setPrompt(p)}
+                  className="rounded-full border border-[--color-border] bg-[--color-bg-subtle] px-2.5 py-1 text-[11.5px] text-[--color-fg-muted] transition-colors hover:border-[--color-border-strong] hover:text-[--color-fg]"
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                  if (!slug || slug === trySlug(name)) setSlug(trySlug(e.target.value));
+                }}
+                placeholder="Notion Reader"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="slug" hint="subdomain / id">Slug</Label>
+              <Input
+                id="slug"
+                value={slug}
+                onChange={(e) => setSlug(trySlug(e.target.value))}
+                placeholder="notion-reader"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label hint="environment variables, encrypted at rest">Secrets</Label>
+            <div className="space-y-2">
+              {secretRows.map((row, i) => (
+                <div key={i} className="grid grid-cols-[1fr_1fr_auto] gap-2">
+                  <Input
+                    placeholder="NOTION_API_KEY"
+                    value={row.key}
+                    onChange={(e) => {
+                      const next = [...secretRows];
+                      next[i] = { key: e.target.value.toUpperCase(), value: row.value };
+                      setSecretRows(next);
+                    }}
+                  />
+                  <Input
+                    placeholder="secret_xxx"
+                    type="password"
+                    value={row.value}
+                    onChange={(e) => {
+                      const next = [...secretRows];
+                      next[i] = { key: row.key, value: e.target.value };
+                      setSecretRows(next);
+                    }}
+                  />
+                  <Button
+                    variant="ghost"
+                    size="md"
+                    onClick={() =>
+                      setSecretRows((rs) => (rs.length > 1 ? rs.filter((_, j) => j !== i) : rs))
+                    }
+                  >
+                    Remove
+                  </Button>
+                </div>
+              ))}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setSecretRows((rs) => [...rs, { key: '', value: '' }])}
+              >
+                + Add secret
+              </Button>
+            </div>
+          </div>
+
+          {error && <p className="text-[12.5px] text-[--color-danger]">{error}</p>}
+
+          <div className="flex justify-end gap-2">
+            <Button variant="ghost" size="md" onClick={() => router.push('/servers')}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="md" onClick={submit}>
+              Build server →
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {step === 'building' && buildId && (
+        <div className="mt-7 space-y-4">
+          <p className="text-[13px] text-[--color-fg-muted]">
+            Building your server. Logs stream live over WebSocket from the generator.
+          </p>
+          <StreamingLogs
+            buildId={buildId}
+            onDone={(status, publicUrl) => {
+              if (status === 'success') {
+                setResult({ serverId: serverId!, publicUrl });
+                setStep('done');
+              } else {
+                setError(`Build ${status}`);
+              }
+            }}
+          />
+          {error && <p className="text-[12.5px] text-[--color-danger]">{error}</p>}
+        </div>
+      )}
+
+      {step === 'done' && result && (
+        <div className="mt-7 space-y-6">
+          <div className="panel p-4">
+            <div className="flex items-baseline justify-between">
+              <h2 className="text-[14px] font-semibold tracking-tight">Your server is live</h2>
+              <span className="mono text-[11px] text-emerald-300">200 OK</span>
+            </div>
+            <p className="mt-1 text-[12.5px] text-[--color-fg-muted]">
+              OAuth-protected Streamable HTTP endpoint:
+            </p>
+            <div className="mt-3">
+              <CodeBlock code={`${result.publicUrl}/mcp`} label="endpoint" />
+            </div>
+          </div>
+
+          {result.publicUrl && (
+            <div>
+              <h2 className="text-[14px] font-semibold tracking-tight">Install</h2>
+              <p className="mt-1 text-[12.5px] text-[--color-fg-muted]">
+                Drop this into your client. OAuth handshake runs automatically on first use.
+              </p>
+              <div className="mt-3">
+                <InstallSnippets
+                  input={{ name, slug, publicUrl: result.publicUrl }}
+                />
+              </div>
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="secondary"
+              size="md"
+              onClick={() => router.push(`/servers/${result.serverId}`)}
+            >
+              Open server →
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/(dashboard)/servers/page.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { apiFetch } from '@/lib/api';
+import { StatusPill } from '@/components/status-pill';
+import { Button } from '@/components/ui/button';
+
+interface ServerRow {
+  id: string;
+  name: string;
+  slug: string;
+  status: string;
+  publicUrl: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function ServersPage() {
+  const [servers, setServers] = useState<ServerRow[] | null>(null);
+  const [q, setQ] = useState('');
+
+  useEffect(() => {
+    apiFetch<{ servers: ServerRow[] }>('/v1/servers').then((r) => setServers(r.servers));
+  }, []);
+
+  const filtered = servers?.filter((s) =>
+    q ? s.name.toLowerCase().includes(q.toLowerCase()) || s.slug.includes(q.toLowerCase()) : true,
+  );
+
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-8">
+      <div className="flex items-baseline justify-between">
+        <div>
+          <h1 className="text-[22px] font-semibold tracking-tight">Servers</h1>
+          <p className="mt-1 text-[13px] text-[--color-fg-muted]">All your hosted MCP servers.</p>
+        </div>
+        <Link href="/servers/new">
+          <Button variant="primary" size="md">+ New server</Button>
+        </Link>
+      </div>
+      <div className="mt-6">
+        <input
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder="Search by name or slug…"
+          className="h-8 w-72 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 text-[13px] placeholder:text-[--color-fg-subtle] focus:border-[--color-accent] focus:outline-none"
+        />
+      </div>
+      <div className="panel mt-4">
+        {!filtered && <div className="px-4 py-4 text-[12.5px] text-[--color-fg-muted]">Loading…</div>}
+        {filtered && filtered.length === 0 && (
+          <div className="px-4 py-12 text-center text-[13px] text-[--color-fg-muted]">No servers match.</div>
+        )}
+        {filtered && filtered.length > 0 && (
+          <table className="w-full text-[12.5px]">
+            <thead className="border-b border-[--color-border] text-[--color-fg-subtle]">
+              <tr>
+                <th className="px-4 py-2 text-left font-medium">Name</th>
+                <th className="px-4 py-2 text-left font-medium">Slug</th>
+                <th className="px-4 py-2 text-left font-medium">Status</th>
+                <th className="px-4 py-2 text-left font-medium">URL</th>
+                <th className="px-4 py-2 text-left font-medium">Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((s) => (
+                <tr key={s.id} className="border-b border-[--color-border] last:border-0 hover:bg-[--color-bg-subtle]">
+                  <td className="px-4 py-2.5">
+                    <Link href={`/servers/${s.id}`} className="font-medium hover:text-[--color-accent]">
+                      {s.name}
+                    </Link>
+                  </td>
+                  <td className="mono px-4 py-2.5 text-[--color-fg-muted]">{s.slug}</td>
+                  <td className="px-4 py-2.5"><StatusPill status={s.status as never} /></td>
+                  <td className="mono px-4 py-2.5 text-[--color-fg-muted]">{s.publicUrl ?? '—'}</td>
+                  <td className="px-4 py-2.5 text-[--color-fg-muted]">
+                    {new Date(s.updatedAt).toLocaleString()}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/install-snippets.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useState } from 'react';
+import { buildSnippet, type SnippetInput } from '@/lib/install-snippets';
+import { CodeBlock } from './code-block';
+import { cn } from '@/lib/cn';
+import type { InstallTarget } from '@bmm/types';
+
+const TABS: { id: InstallTarget; label: string }[] = [
+  { id: 'claude-desktop', label: 'Claude Desktop' },
+  { id: 'cursor', label: 'Cursor' },
+  { id: 'chatgpt', label: 'ChatGPT' },
+];
+
+export function InstallSnippets({ input }: { input: SnippetInput }) {
+  const [tab, setTab] = useState<InstallTarget>('claude-desktop');
+  const snippet = buildSnippet(tab, input);
+  return (
+    <div>
+      <div className="flex gap-1 border-b border-[--color-border]">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => setTab(t.id)}
+            className={cn(
+              'relative px-3 py-2 text-[12.5px] transition-colors duration-200 ease-out',
+              tab === t.id
+                ? 'text-[--color-fg]'
+                : 'text-[--color-fg-muted] hover:text-[--color-fg]',
+            )}
+          >
+            {t.label}
+            {tab === t.id && (
+              <span className="absolute inset-x-0 -bottom-px h-px bg-[--color-fg]" />
+            )}
+          </button>
+        ))}
+      </div>
+      <div className="pt-4">
+        <CodeBlock label={snippet.label} code={snippet.code} />
+        {snippet.note && (
+          <p className="mt-2 text-[12px] leading-relaxed text-[--color-fg-muted]">{snippet.note}</p>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/streaming-logs.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { apiWebSocketURL } from '@/lib/api';
+import { cn } from '@/lib/cn';
+import type { BuildEvent, BuildStatus } from '@bmm/types';
+import { StatusPill } from './status-pill';
+
+export interface StreamingLogsProps {
+  buildId: string;
+  onDone?: (status: BuildStatus, publicUrl: string | null) => void;
+  className?: string;
+}
+
+interface LogLine {
+  level: 'info' | 'warn' | 'error';
+  message: string;
+  at: string;
+}
+
+export function StreamingLogs({ buildId, onDone, className }: StreamingLogsProps) {
+  const [logs, setLogs] = useState<LogLine[]>([]);
+  const [status, setStatus] = useState<BuildStatus>('queued');
+  const [connected, setConnected] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone;
+
+  useEffect(() => {
+    const url = apiWebSocketURL(`/v1/builds/${buildId}/stream`);
+    const ws = new WebSocket(url);
+    ws.onopen = () => setConnected(true);
+    ws.onclose = () => setConnected(false);
+    ws.onmessage = (ev) => {
+      try {
+        const evt = JSON.parse(ev.data) as BuildEvent;
+        if (evt.type === 'log') {
+          setLogs((prev) => [...prev, { level: evt.level, message: evt.message, at: evt.at }]);
+        } else if (evt.type === 'status') {
+          setStatus(evt.status);
+        } else if (evt.type === 'done') {
+          setStatus(evt.status);
+          onDoneRef.current?.(evt.status, evt.publicUrl);
+        } else if (evt.type === 'error') {
+          setLogs((prev) => [...prev, { level: 'error', message: evt.message, at: evt.at }]);
+        }
+      } catch {}
+    };
+    return () => ws.close();
+  }, [buildId]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs.length]);
+
+  return (
+    <div className={cn('panel', className)}>
+      <div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
+        <div className="flex items-center gap-2">
+          <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+            build.log
+          </span>
+          <StatusPill status={status} />
+        </div>
+        <span className="mono text-[10.5px] text-[--color-fg-subtle]">
+          {connected ? 'ws · connected' : 'ws · …'}
+        </span>
+      </div>
+      <div ref={scrollRef} className="mono max-h-80 overflow-y-auto p-3 text-[12px] leading-relaxed">
+        {logs.length === 0 && (
+          <div className="text-[--color-fg-subtle]">Waiting for build events…</div>
+        )}
+        {logs.map((l, i) => (
+          <div
+            key={i}
+            className={cn(
+              'whitespace-pre-wrap',
+              l.level === 'error' && 'text-[--color-danger]',
+              l.level === 'warn' && 'text-[--color-warn]',
+              l.level === 'info' && 'text-[--color-fg-muted]',
+            )}
+          >
+            <span className="text-[--color-fg-subtle]">
+              {new Date(l.at).toLocaleTimeString()}
+            </span>
+            {'  '}
+            {l.message}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/lib/install-snippets.ts

@@ -0,0 +1,54 @@
+import type { InstallTarget } from '@bmm/types';
+
+export interface SnippetInput {
+  name: string;
+  slug: string;
+  publicUrl: string;
+}
+
+export function buildSnippet(target: InstallTarget, input: SnippetInput): { label: string; code: string; note?: string } {
+  const key = input.slug.replace(/[^a-zA-Z0-9_-]/g, '_');
+  const mcpUrl = `${input.publicUrl.replace(/\/$/, '')}/mcp`;
+  switch (target) {
+    case 'claude-desktop':
+      return {
+        label: 'claude_desktop_config.json',
+        code: JSON.stringify(
+          {
+            mcpServers: {
+              [key]: {
+                url: mcpUrl,
+                auth: 'oauth2',
+              },
+            },
+          },
+          null,
+          2,
+        ),
+        note: '~/Library/Application Support/Claude/claude_desktop_config.json (macOS) — Settings → Developer (Windows). Restart Claude after saving.',
+      };
+    case 'cursor':
+      return {
+        label: '.cursor/mcp.json',
+        code: JSON.stringify(
+          {
+            mcpServers: {
+              [key]: {
+                url: mcpUrl,
+                auth: 'oauth2',
+              },
+            },
+          },
+          null,
+          2,
+        ),
+        note: 'Place at the project root or in ~/.cursor/mcp.json for global use.',
+      };
+    case 'chatgpt':
+      return {
+        label: 'ChatGPT — Custom Connector',
+        code: `Name:  ${input.name}\nURL:   ${mcpUrl}\nAuth:  OAuth 2.1 (Dynamic Client Registration)`,
+        note: 'ChatGPT → Settings → Connectors → Add custom connector. Paste the values above. OAuth handshake runs on first use.',
+      };
+  }
+}