Implement more stuff

frontend/README.md

@@ -76,19 +76,3 @@ Super admin dashboard:
 - `/admin/relays` — list relays
 - `/admin/relays/:id` — relay detail
 - `/admin/relays/:id/edit` — edit relay
-
-## Todos
-
-- [ ] Marketing page (`/`) with value props, features, and CTA
-- [ ] Tenant dashboard auth via NIP-98
-  - [ ] Relays list (`/relays`) with search/filter and add relay CTA
-  - [ ] Relay detail (`/relays/:id`) with edit + deactivate actions
-  - [ ] New relay form (`/relays/new`) with plan selection + invoice flow
-  - [ ] Relay edit form (`/relays/:id/edit`)
-  - [ ] Account page (`/account`) with status, invoices, and recurring billing toggle
-- [ ] Super admin dashboard auth via `PLATFORM_ADMIN_PUBKEYS`
-  - [ ] Tenants list (`/admin/tenants`)
-  - [ ] Tenant detail (`/admin/tenants/:id`) with status + deactivate actions
-  - [ ] Relays list (`/admin/relays`)
-  - [ ] Relay detail (`/admin/relays/:id`)
-  - [ ] Relay edit form (`/admin/relays/:id/edit`)

frontend/src/App.tsx

@@ -1,5 +1,6 @@
-import { createEffect } from "solid-js"
+import { createEffect, createResource, Show } from "solid-js"
-import { Router, Route, useLocation } from "@solidjs/router"
+import { Router, Route, useLocation, useNavigate } from "@solidjs/router"
+import type { Component } from "solid-js"
 import Navbar from "./components/Navbar"
 import Home from "./pages/Home"
 import Login from "./pages/Login"
@@ -13,6 +14,8 @@ import AdminTenantDetail from "./pages/admin/AdminTenantDetail"
 import AdminRelays from "./pages/admin/AdminRelays"
 import AdminRelayDetail from "./pages/admin/AdminRelayDetail"
 import AdminRelayEdit from "./pages/admin/AdminRelayEdit"
+import { useActiveAccount } from "./lib/nostr"
+import { adminListTenants } from "./lib/api"
 
 function Layout(props: { children?: any }) {
   const location = useLocation()
@@ -32,20 +35,64 @@ function Layout(props: { children?: any }) {
 }
 
 export default function App() {
+  const withTenantAuth = (Page: Component): Component => {
+    return () => {
+      const navigate = useNavigate()
+      const account = useActiveAccount()
+
+      createEffect(() => {
+        if (!account()) navigate("/login", { replace: true })
+      })
+
+      return <Show when={account()}><Page /></Show>
+    }
+  }
+
+  const withAdminAuth = (Page: Component): Component => {
+    return () => {
+      const navigate = useNavigate()
+      const account = useActiveAccount()
+      const [adminCheck] = createResource(
+        () => account()?.id,
+        async () => {
+          await adminListTenants()
+          return true
+        },
+      )
+
+      createEffect(() => {
+        if (!account()) navigate("/login", { replace: true })
+      })
+
+      return (
+        <Show when={account()}>
+          <Show when={!adminCheck.loading} fallback={<div class="max-w-4xl mx-auto px-4 py-8 text-gray-500">Checking admin access...</div>}>
+            <Show
+              when={!adminCheck.error}
+              fallback={<div class="max-w-4xl mx-auto px-4 py-8 text-red-600">You do not have admin access.</div>}
+            >
+              <Page />
+            </Show>
+          </Show>
+        </Show>
+      )
+    }
+  }
+
   return (
     <Router root={Layout}>
       <Route path="/" component={Home} />
       <Route path="/login" component={Login} />
-      <Route path="/relays" component={RelayList} />
+      <Route path="/relays" component={withTenantAuth(RelayList)} />
-      <Route path="/relays/new" component={RelayNew} />
+      <Route path="/relays/new" component={withTenantAuth(RelayNew)} />
-      <Route path="/relays/:id" component={RelayDetail} />
+      <Route path="/relays/:id" component={withTenantAuth(RelayDetail)} />
-      <Route path="/relays/:id/edit" component={RelayEdit} />
+      <Route path="/relays/:id/edit" component={withTenantAuth(RelayEdit)} />
-      <Route path="/account" component={Account} />
+      <Route path="/account" component={withTenantAuth(Account)} />
-      <Route path="/admin/tenants" component={AdminTenants} />
+      <Route path="/admin/tenants" component={withAdminAuth(AdminTenants)} />
-      <Route path="/admin/tenants/:id" component={AdminTenantDetail} />
+      <Route path="/admin/tenants/:id" component={withAdminAuth(AdminTenantDetail)} />
-      <Route path="/admin/relays" component={AdminRelays} />
+      <Route path="/admin/relays" component={withAdminAuth(AdminRelays)} />
-      <Route path="/admin/relays/:id" component={AdminRelayDetail} />
+      <Route path="/admin/relays/:id" component={withAdminAuth(AdminRelayDetail)} />
-      <Route path="/admin/relays/:id/edit" component={AdminRelayEdit} />
+      <Route path="/admin/relays/:id/edit" component={withAdminAuth(AdminRelayEdit)} />
     </Router>
   )
 }

frontend/src/lib/api.ts

@@ -96,10 +96,42 @@ export type Relay = {
   status: string
 }
 
+export type Tenant = {
+  pubkey: string
+  status: string
+  tenant_nwc_url: string
+}
+
+export type Invoice = {
+  id: string
+  tenant: string
+  amount: number
+  status: string
+  created_at: string
+  invoice: string
+}
+
+export type TenantDetail = {
+  tenant: Tenant
+  relays: Relay[]
+}
+
+export type UpdateRelayInput = {
+  name: string
+  subdomain: string
+  icon: string
+  description: string
+  plan: string
+}
+
 export function listTenantRelays() {
   return request<Relay[]>("/tenant/relays")
 }
 
+export function getTenant() {
+  return request<Tenant>("/tenant")
+}
+
 export type CreateRelayInput = {
   name: string
   subdomain: string
@@ -118,3 +150,63 @@ export function createTenantRelay(input: CreateRelayInput) {
 export function getTenantRelay(id: string) {
   return request<Relay>(`/tenant/relays/${id}`)
 }
+
+export function updateTenantRelay(id: string, input: UpdateRelayInput) {
+  return request<Relay>(`/tenant/relays/${id}`, {
+    method: "PUT",
+    body: JSON.stringify(input),
+  })
+}
+
+export function deactivateTenantRelay(id: string) {
+  return request<Relay>(`/tenant/relays/${id}`, {
+    method: "DELETE",
+  })
+}
+
+export function listTenantInvoices() {
+  return request<Invoice[]>("/tenant/invoices")
+}
+
+export function updateTenantBilling(tenant_nwc_url: string) {
+  return request<Tenant>("/tenant/billing", {
+    method: "PUT",
+    body: JSON.stringify({ tenant_nwc_url }),
+  })
+}
+
+export function adminListTenants() {
+  return request<Tenant[]>("/admin/tenants")
+}
+
+export function adminGetTenant(pubkey: string) {
+  return request<TenantDetail>(`/admin/tenants/${pubkey}`)
+}
+
+export function adminUpdateTenantStatus(pubkey: string, status: string) {
+  return request<Tenant>(`/admin/tenants/${pubkey}`, {
+    method: "PUT",
+    body: JSON.stringify({ status }),
+  })
+}
+
+export function adminListRelays() {
+  return request<Relay[]>("/admin/relays")
+}
+
+export function adminGetRelay(id: string) {
+  return request<Relay>(`/admin/relays/${id}`)
+}
+
+export function adminUpdateRelay(id: string, input: UpdateRelayInput) {
+  return request<Relay>(`/admin/relays/${id}`, {
+    method: "PUT",
+    body: JSON.stringify(input),
+  })
+}
+
+export function adminDeactivateRelay(id: string) {
+  return request<Relay>(`/admin/relays/${id}`, {
+    method: "DELETE",
+  })
+}

frontend/src/pages/Account.tsx

@@ -1,4 +1,29 @@
+import { createMemo, createResource, createSignal, For, Show } from "solid-js"
+import { getTenant, listTenantInvoices, updateTenantBilling } from "../lib/api"
+
 export default function Account() {
+  const [tenant, { refetch: refetchTenant }] = createResource(getTenant)
+  const [invoices] = createResource(listTenantInvoices)
+  const [nwcUrl, setNwcUrl] = createSignal("")
+  const [saving, setSaving] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  const recurringEnabled = createMemo(() => !!tenant()?.tenant_nwc_url?.trim())
+
+  async function saveBilling() {
+    setError("")
+    setSaving(true)
+    try {
+      await updateTenantBilling(nwcUrl().trim())
+      setNwcUrl("")
+      await refetchTenant()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to update billing")
+    } finally {
+      setSaving(false)
+    }
+  }
+
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
       <h1 class="text-2xl font-bold text-gray-900 mb-6">Account</h1>
@@ -6,7 +31,19 @@ export default function Account() {
       <div class="space-y-6">
         <section class="bg-white border border-gray-200 rounded-xl p-6">
           <h2 class="text-lg font-semibold text-gray-900 mb-4">Account Status</h2>
-          <p class="text-gray-500">Status information coming soon.</p>
+          <Show when={tenant.loading}>
+            <p class="text-gray-500">Loading account...</p>
+          </Show>
+          <Show when={tenant()}>
+            {(t) => (
+              <div class="text-sm text-gray-700 space-y-2">
+                <p>
+                  Status: <span class="font-medium capitalize">{t().status}</span>
+                </p>
+                <p class="break-all">Tenant pubkey: {t().pubkey}</p>
+              </div>
+            )}
+          </Show>
         </section>
 
         <section class="bg-white border border-gray-200 rounded-xl p-6">
@@ -14,16 +51,66 @@ export default function Account() {
           <p class="text-sm text-gray-600 mb-4">
             Enable automatic payments by providing your Nostr Wallet Connect URL.
           </p>
-          <input
+          <p class="text-sm mb-3">
-            type="text"
+            Current setting:{" "}
-            placeholder="nostr+walletconnect://..."
+            <span class={recurringEnabled() ? "text-green-700 font-medium" : "text-gray-600"}>
-            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              {recurringEnabled() ? "Enabled" : "Disabled"}
-          />
+            </span>
+          </p>
+          <div class="flex gap-2">
+            <input
+              type="text"
+              value={nwcUrl()}
+              onInput={(e) => setNwcUrl(e.currentTarget.value)}
+              placeholder="nostr+walletconnect://..."
+              class="flex-1 border border-gray-300 rounded-lg px-3 py-2"
+            />
+            <button
+              type="button"
+              onClick={saveBilling}
+              disabled={saving()}
+              class="py-2 px-4 bg-blue-600 text-white rounded-lg disabled:opacity-50"
+            >
+              {saving() ? "Saving..." : "Save"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setNwcUrl("")
+                void saveBilling()
+              }}
+              disabled={saving() || !recurringEnabled()}
+              class="py-2 px-4 border border-gray-300 rounded-lg disabled:opacity-50"
+            >
+              Disable
+            </button>
+          </div>
+          <Show when={error()}>
+            <p class="mt-3 text-sm text-red-600">{error()}</p>
+          </Show>
         </section>
 
         <section class="bg-white border border-gray-200 rounded-xl p-6">
           <h2 class="text-lg font-semibold text-gray-900 mb-4">Invoice History</h2>
-          <p class="text-gray-500">No invoices yet.</p>
+          <Show when={invoices.loading}>
+            <p class="text-gray-500">Loading invoices...</p>
+          </Show>
+          <Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
+            <ul class="space-y-3">
+              <For each={invoices()}>
+                {(invoice) => (
+                  <li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
+                    <div class="flex items-center justify-between gap-3">
+                      <span class="font-medium">{invoice.amount.toLocaleString()} sats</span>
+                      <span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
+                    </div>
+                    <p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at).toLocaleString()}</p>
+                    <p class="text-xs mt-2 break-all">{invoice.invoice}</p>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
         </section>
       </div>
     </div>

frontend/src/pages/admin/AdminRelayDetail.tsx

@@ -1,14 +1,56 @@
 import { useParams, A } from "@solidjs/router"
+import { createResource, createSignal, Show } from "solid-js"
+import { adminDeactivateRelay, adminGetRelay } from "../../lib/api"
 
 export default function AdminRelayDetail() {
   const params = useParams()
+  const relayId = () => params.id ?? ""
+  const [relay, { refetch }] = createResource(relayId, adminGetRelay)
+  const [busy, setBusy] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function handleDeactivate() {
+    if (busy()) return
+    setError("")
+    setBusy(true)
+    try {
+      await adminDeactivateRelay(relayId())
+      await refetch()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to deactivate relay")
+    } finally {
+      setBusy(false)
+    }
+  }
 
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
       <div class="flex items-center gap-2 mb-6">
         <A href="/admin/relays" class="text-gray-500 hover:text-gray-700">← Relays</A>
       </div>
-      <h1 class="text-2xl font-bold text-gray-900 mb-4">Relay {params.id}</h1>
+
+      <Show when={relay.loading}>
+        <p class="text-gray-500 mb-4">Loading relay...</p>
+      </Show>
+      <Show when={relay.error && !relay.loading}>
+        <p class="text-red-600 mb-4">Failed to load relay.</p>
+      </Show>
+
+      <Show when={relay()}>
+        {(r) => (
+          <div class="mb-6">
+            <h1 class="text-2xl font-bold text-gray-900 mb-1">{r().name}</h1>
+            <p class="text-sm text-gray-500">{r().subdomain}.spaces.coracle.social</p>
+            <p class="text-sm text-gray-500 mt-2 break-all">Tenant: {r().tenant}</p>
+            <p class="text-sm text-gray-700 mt-2">Plan: <span class="uppercase">{r().plan}</span></p>
+            <p class="text-sm text-gray-700">Status: <span class="uppercase">{r().status}</span></p>
+            <Show when={r().description.trim()}>
+              <p class="mt-3 text-gray-700">{r().description}</p>
+            </Show>
+          </div>
+        )}
+      </Show>
+
       <div class="flex gap-3">
         <A
           href={`/admin/relays/${params.id}/edit`}
@@ -16,10 +58,17 @@ export default function AdminRelayDetail() {
         >
           Edit
         </A>
-        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+        <button
-          Deactivate
+          class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors disabled:opacity-50"
+          onClick={handleDeactivate}
+          disabled={busy()}
+        >
+          {busy() ? "Deactivating..." : "Deactivate"}
         </button>
       </div>
+      <Show when={error()}>
+        <p class="mt-3 text-sm text-red-600">{error()}</p>
+      </Show>
     </div>
   )
 }

frontend/src/pages/admin/AdminRelayEdit.tsx

@@ -1,7 +1,63 @@
-import { useParams, A } from "@solidjs/router"
+import { A, useNavigate, useParams } from "@solidjs/router"
+import { Show, createEffect, createResource, createSignal } from "solid-js"
+import { adminGetRelay, adminUpdateRelay } from "../../lib/api"
+
+const PLANS = ["free", "basic", "growth"] as const
+type PlanId = (typeof PLANS)[number]
+
+function slugify(s: string) {
+  return s
+    .toLowerCase()
+    .trim()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+}
 
 export default function AdminRelayEdit() {
+  const navigate = useNavigate()
   const params = useParams()
+  const relayId = () => params.id ?? ""
+  const [relay] = createResource(relayId, adminGetRelay)
+
+  const [name, setName] = createSignal("")
+  const [subdomain, setSubdomain] = createSignal("")
+  const [icon, setIcon] = createSignal("")
+  const [description, setDescription] = createSignal("")
+  const [plan, setPlan] = createSignal<PlanId>("free")
+  const [error, setError] = createSignal("")
+  const [submitting, setSubmitting] = createSignal(false)
+
+  createEffect(() => {
+    const data = relay()
+    if (!data) return
+    setName(data.name)
+    setSubdomain(data.subdomain)
+    setIcon(data.icon)
+    setDescription(data.description)
+    setPlan(PLANS.includes(data.plan as PlanId) ? (data.plan as PlanId) : "free")
+  })
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    setError("")
+    setSubmitting(true)
+    try {
+      await adminUpdateRelay(relayId(), {
+        name: name().trim(),
+        subdomain: slugify(subdomain()),
+        icon: icon().trim(),
+        description: description().trim(),
+        plan: plan(),
+      })
+      navigate(`/admin/relays/${relayId()}`)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to update relay")
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
   return (
     <div class="max-w-2xl mx-auto px-4 py-8">
@@ -9,7 +65,81 @@ export default function AdminRelayEdit() {
         <A href={`/admin/relays/${params.id}`} class="text-gray-500 hover:text-gray-700">← Back</A>
       </div>
       <h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay (Admin)</h1>
-      <p class="text-gray-500">Edit form coming soon.</p>
+
+      <Show when={relay.loading}>
+        <p class="text-gray-500">Loading relay...</p>
+      </Show>
+      <Show when={relay.error && !relay.loading}>
+        <p class="text-red-600">Failed to load relay.</p>
+      </Show>
+
+      <Show when={relay() && !relay.loading}>
+        <form onSubmit={handleSubmit} class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
+            <input
+              value={name()}
+              onInput={e => setName(e.currentTarget.value)}
+              required
+              class="w-full border border-gray-300 rounded-lg px-3 py-2"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
+            <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
+              <input
+                value={subdomain()}
+                onInput={e => setSubdomain(e.currentTarget.value)}
+                required
+                class="flex-1 px-3 py-2"
+              />
+              <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">.spaces.coracle.social</span>
+            </div>
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
+            <input
+              type="url"
+              value={icon()}
+              onInput={e => setIcon(e.currentTarget.value)}
+              class="w-full border border-gray-300 rounded-lg px-3 py-2"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <textarea
+              value={description()}
+              onInput={e => setDescription(e.currentTarget.value)}
+              rows={3}
+              class="w-full border border-gray-300 rounded-lg px-3 py-2"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Plan</label>
+            <div class="flex gap-2">
+              {PLANS.map(p => (
+                <button
+                  type="button"
+                  class={`rounded-lg border px-3 py-2 text-sm capitalize ${plan() === p ? "border-blue-600 text-blue-700" : "border-gray-300 text-gray-700"}`}
+                  onClick={() => setPlan(p)}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+          </div>
+          <Show when={error()}>
+            <p class="text-sm text-red-600">{error()}</p>
+          </Show>
+          <button
+            type="submit"
+            disabled={submitting()}
+            class="w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50"
+          >
+            {submitting() ? "Saving..." : "Save Changes"}
+          </button>
+        </form>
+      </Show>
     </div>
   )
 }

frontend/src/pages/admin/AdminRelays.tsx

@@ -1,13 +1,60 @@
+import { A } from "@solidjs/router"
+import { createMemo, createResource, createSignal, For, Show } from "solid-js"
+import { adminListRelays } from "../../lib/api"
+
 export default function AdminRelays() {
+  const [query, setQuery] = createSignal("")
+  const [relays] = createResource(adminListRelays)
+
+  const filtered = createMemo(() => {
+    const q = query().trim().toLowerCase()
+    return (relays() ?? []).filter((relay) => {
+      if (!q) return true
+      return (
+        relay.name.toLowerCase().includes(q)
+        || relay.subdomain.toLowerCase().includes(q)
+        || relay.tenant.toLowerCase().includes(q)
+      )
+    })
+  })
+
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
       <h1 class="text-2xl font-bold text-gray-900 mb-6">All Relays</h1>
       <input
         type="search"
+        value={query()}
+        onInput={(e) => setQuery(e.currentTarget.value)}
         placeholder="Search relays..."
         class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
-      <p class="text-gray-500">No relays found.</p>
+
+      <Show when={relays.loading}>
+        <p class="text-gray-500">Loading relays...</p>
+      </Show>
+      <Show when={relays.error && !relays.loading}>
+        <p class="text-red-600">Failed to load relays.</p>
+      </Show>
+      <Show when={(filtered().length ?? 0) > 0} fallback={<p class="text-gray-500">No relays found.</p>}>
+        <ul class="space-y-3">
+          <For each={filtered()}>
+            {(relay) => (
+              <li>
+                <A href={`/admin/relays/${relay.id}`} class="block border border-gray-200 rounded-lg p-4 bg-white hover:border-gray-300">
+                  <div class="flex items-center justify-between gap-3">
+                    <div>
+                      <p class="font-medium text-gray-900">{relay.name}</p>
+                      <p class="text-xs text-gray-500">{relay.subdomain}.spaces.coracle.social</p>
+                      <p class="text-xs text-gray-500 break-all mt-1">Tenant: {relay.tenant}</p>
+                    </div>
+                    <p class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</p>
+                  </div>
+                </A>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
     </div>
   )
 }

frontend/src/pages/admin/AdminTenantDetail.tsx

@@ -1,7 +1,27 @@
 import { useParams, A } from "@solidjs/router"
+import { createResource, createSignal, For, Show } from "solid-js"
+import { adminGetTenant, adminUpdateTenantStatus } from "../../lib/api"
 
 export default function AdminTenantDetail() {
   const params = useParams()
+  const tenantId = () => params.id ?? ""
+  const [detail, { refetch }] = createResource(tenantId, adminGetTenant)
+  const [busy, setBusy] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function setStatus(status: string) {
+    if (busy()) return
+    setBusy(true)
+    setError("")
+    try {
+      await adminUpdateTenantStatus(tenantId(), status)
+      await refetch()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to update tenant")
+    } finally {
+      setBusy(false)
+    }
+  }
 
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
@@ -9,14 +29,69 @@ export default function AdminTenantDetail() {
         <A href="/admin/tenants" class="text-gray-500 hover:text-gray-700">← Tenants</A>
       </div>
       <h1 class="text-2xl font-bold text-gray-900 mb-6">Tenant {params.id}</h1>
+
+      <Show when={detail.loading}>
+        <p class="text-gray-500 mb-4">Loading tenant...</p>
+      </Show>
+      <Show when={detail.error && !detail.loading}>
+        <p class="text-red-600 mb-4">Failed to load tenant.</p>
+      </Show>
+
       <div class="space-y-6">
         <section class="bg-white border border-gray-200 rounded-xl p-6">
-          <h2 class="text-lg font-semibold mb-4">Relays</h2>
+          <h2 class="text-lg font-semibold mb-4">Status</h2>
-          <p class="text-gray-500">No relays.</p>
+          <Show when={detail()}>
+            {(d) => (
+              <div class="space-y-3">
+                <p class="text-sm text-gray-700">
+                  Current: <span class="font-medium uppercase tracking-wide">{d().tenant.status}</span>
+                </p>
+                <div class="flex gap-2">
+                  <button
+                    class="py-2 px-4 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50"
+                    onClick={() => void setStatus("active")}
+                    disabled={busy()}
+                  >
+                    Activate
+                  </button>
+                  <button
+                    class="py-2 px-4 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 disabled:opacity-50"
+                    onClick={() => void setStatus("deactivated")}
+                    disabled={busy()}
+                  >
+                    Deactivate
+                  </button>
+                </div>
+              </div>
+            )}
+          </Show>
         </section>
-        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+
-          Deactivate Tenant
+        <section class="bg-white border border-gray-200 rounded-xl p-6">
-        </button>
+          <h2 class="text-lg font-semibold mb-4">Relays</h2>
+          <Show when={(detail()?.relays.length ?? 0) > 0} fallback={<p class="text-gray-500">No relays.</p>}>
+            <ul class="space-y-3">
+              <For each={detail()?.relays ?? []}>
+                {(relay) => (
+                  <li>
+                    <A href={`/admin/relays/${relay.id}`} class="block rounded-lg border border-gray-200 p-3 hover:border-gray-300">
+                      <div class="flex items-center justify-between gap-2">
+                        <div>
+                          <p class="font-medium text-gray-900">{relay.name}</p>
+                          <p class="text-xs text-gray-500">{relay.subdomain}.spaces.coracle.social</p>
+                        </div>
+                        <span class="text-xs uppercase tracking-wide text-gray-500">{relay.status}</span>
+                      </div>
+                    </A>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
+        </section>
+        <Show when={error()}>
+          <p class="text-sm text-red-600">{error()}</p>
+        </Show>
       </div>
     </div>
   )

frontend/src/pages/admin/AdminTenants.tsx

@@ -1,13 +1,52 @@
+import { A } from "@solidjs/router"
+import { createMemo, createResource, createSignal, For, Show } from "solid-js"
+import { adminListTenants } from "../../lib/api"
+
 export default function AdminTenants() {
+  const [query, setQuery] = createSignal("")
+  const [tenants] = createResource(adminListTenants)
+
+  const filtered = createMemo(() => {
+    const q = query().trim().toLowerCase()
+    return (tenants() ?? []).filter((tenant) => {
+      if (!q) return true
+      return tenant.pubkey.toLowerCase().includes(q) || tenant.status.toLowerCase().includes(q)
+    })
+  })
+
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
       <h1 class="text-2xl font-bold text-gray-900 mb-6">Tenants</h1>
       <input
         type="search"
+        value={query()}
+        onInput={(e) => setQuery(e.currentTarget.value)}
         placeholder="Search tenants..."
         class="w-full border border-gray-300 rounded-lg px-3 py-2 mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
-      <p class="text-gray-500">No tenants found.</p>
+
+      <Show when={tenants.loading}>
+        <p class="text-gray-500">Loading tenants...</p>
+      </Show>
+      <Show when={tenants.error && !tenants.loading}>
+        <p class="text-red-600">Failed to load tenants.</p>
+      </Show>
+      <Show when={(filtered().length ?? 0) > 0} fallback={<p class="text-gray-500">No tenants found.</p>}>
+        <ul class="space-y-3">
+          <For each={filtered()}>
+            {(tenant) => (
+              <li>
+                <A href={`/admin/tenants/${tenant.pubkey}`} class="block border border-gray-200 rounded-lg p-4 bg-white hover:border-gray-300">
+                  <div class="flex items-center justify-between gap-3">
+                    <p class="text-sm break-all text-gray-700">{tenant.pubkey}</p>
+                    <p class="text-xs uppercase tracking-wide text-gray-500">{tenant.status}</p>
+                  </div>
+                </A>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
     </div>
   )
 }

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,10 +1,27 @@
 import { useParams, A } from "@solidjs/router"
-import { createResource, Show } from "solid-js"
+import { createResource, createSignal, Show } from "solid-js"
-import { getTenantRelay } from "../../lib/api"
+import { deactivateTenantRelay, getTenantRelay } from "../../lib/api"
 
 export default function RelayDetail() {
   const params = useParams()
-  const [relay] = createResource(() => params.id, getTenantRelay)
+  const relayId = () => params.id ?? ""
+  const [relay, { refetch }] = createResource(relayId, getTenantRelay)
+  const [busy, setBusy] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function handleDeactivate() {
+    if (busy()) return
+    setError("")
+    setBusy(true)
+    try {
+      await deactivateTenantRelay(relayId())
+      await refetch()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to deactivate relay")
+    } finally {
+      setBusy(false)
+    }
+  }
 
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
@@ -39,10 +56,17 @@ export default function RelayDetail() {
         >
           Edit
         </A>
-        <button class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors">
+        <button
-          Deactivate
+          class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors disabled:opacity-50"
+          onClick={handleDeactivate}
+          disabled={busy()}
+        >
+          {busy() ? "Deactivating..." : "Deactivate"}
         </button>
       </div>
+      <Show when={error()}>
+        <p class="mt-3 text-sm text-red-600">{error()}</p>
+      </Show>
     </div>
   )
 }

frontend/src/pages/relays/RelayEdit.tsx

@@ -1,7 +1,63 @@
-import { useParams, A } from "@solidjs/router"
+import { A, useNavigate, useParams } from "@solidjs/router"
+import { Show, createEffect, createResource, createSignal } from "solid-js"
+import { getTenantRelay, updateTenantRelay } from "../../lib/api"
+
+const PLANS = ["free", "basic", "growth"] as const
+type PlanId = (typeof PLANS)[number]
+
+function slugify(s: string) {
+  return s
+    .toLowerCase()
+    .trim()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+}
 
 export default function RelayEdit() {
+  const navigate = useNavigate()
   const params = useParams()
+  const relayId = () => params.id ?? ""
+  const [relay] = createResource(relayId, getTenantRelay)
+
+  const [name, setName] = createSignal("")
+  const [subdomain, setSubdomain] = createSignal("")
+  const [icon, setIcon] = createSignal("")
+  const [description, setDescription] = createSignal("")
+  const [plan, setPlan] = createSignal<PlanId>("free")
+  const [error, setError] = createSignal("")
+  const [submitting, setSubmitting] = createSignal(false)
+
+  createEffect(() => {
+    const data = relay()
+    if (!data) return
+    setName(data.name)
+    setSubdomain(data.subdomain)
+    setIcon(data.icon)
+    setDescription(data.description)
+    setPlan(PLANS.includes(data.plan as PlanId) ? (data.plan as PlanId) : "free")
+  })
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    setError("")
+    setSubmitting(true)
+    try {
+      await updateTenantRelay(relayId(), {
+        name: name().trim(),
+        subdomain: slugify(subdomain()),
+        icon: icon().trim(),
+        description: description().trim(),
+        plan: plan(),
+      })
+      navigate(`/relays/${relayId()}`)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to update relay")
+    } finally {
+      setSubmitting(false)
+    }
+  }
 
   return (
     <div class="max-w-2xl mx-auto px-4 py-8">
@@ -9,7 +65,81 @@ export default function RelayEdit() {
         <A href={`/relays/${params.id}`} class="text-gray-500 hover:text-gray-700">← Back</A>
       </div>
       <h1 class="text-2xl font-bold text-gray-900 mb-6">Edit Relay</h1>
-      <p class="text-gray-500">Edit form coming soon.</p>
+
+      <Show when={relay.loading}>
+        <p class="text-gray-500">Loading relay...</p>
+      </Show>
+      <Show when={relay.error && !relay.loading}>
+        <p class="text-red-600">Failed to load relay.</p>
+      </Show>
+
+      <Show when={relay() && !relay.loading}>
+        <form onSubmit={handleSubmit} class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
+            <input
+              value={name()}
+              onInput={e => setName(e.currentTarget.value)}
+              required
+              class="w-full border border-gray-300 rounded-lg px-3 py-2"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
+            <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
+              <input
+                value={subdomain()}
+                onInput={e => setSubdomain(e.currentTarget.value)}
+                required
+                class="flex-1 px-3 py-2"
+              />
+              <span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">.spaces.coracle.social</span>
+            </div>
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
+            <input
+              type="url"
+              value={icon()}
+              onInput={e => setIcon(e.currentTarget.value)}
+              class="w-full border border-gray-300 rounded-lg px-3 py-2"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <textarea
+              value={description()}
+              onInput={e => setDescription(e.currentTarget.value)}
+              rows={3}
+              class="w-full border border-gray-300 rounded-lg px-3 py-2"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">Plan</label>
+            <div class="flex gap-2">
+              {PLANS.map(p => (
+                <button
+                  type="button"
+                  class={`rounded-lg border px-3 py-2 text-sm capitalize ${plan() === p ? "border-blue-600 text-blue-700" : "border-gray-300 text-gray-700"}`}
+                  onClick={() => setPlan(p)}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+          </div>
+          <Show when={error()}>
+            <p class="text-sm text-red-600">{error()}</p>
+          </Show>
+          <button
+            type="submit"
+            disabled={submitting()}
+            class="w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50"
+          >
+            {submitting() ? "Saving..." : "Save Changes"}
+          </button>
+        </form>
+      </Show>
     </div>
   )
 }

frontend/src/pages/relays/RelayList.tsx

@@ -1,9 +1,23 @@
 import { A } from "@solidjs/router"
-import { createResource, For, Show } from "solid-js"
+import { createMemo, createResource, createSignal, For, Show } from "solid-js"
 import { listTenantRelays } from "../../lib/api"
 
 export default function RelayList() {
   const [relays] = createResource(listTenantRelays)
+  const [query, setQuery] = createSignal("")
+  const [status, setStatus] = createSignal("all")
+
+  const filtered = createMemo(() => {
+    const q = query().trim().toLowerCase()
+    return (relays() ?? []).filter((relay) => {
+      const matchesQuery =
+        !q ||
+        relay.name.toLowerCase().includes(q) ||
+        relay.subdomain.toLowerCase().includes(q)
+      const matchesStatus = status() === "all" || relay.status === status()
+      return matchesQuery && matchesStatus
+    })
+  })
 
   return (
     <div class="max-w-4xl mx-auto px-4 py-8">
@@ -17,6 +31,28 @@ export default function RelayList() {
         </A>
       </div>
 
+      <div class="mb-6 grid gap-3 sm:grid-cols-[1fr_auto]">
+        <input
+          type="search"
+          value={query()}
+          onInput={(e) => setQuery(e.currentTarget.value)}
+          placeholder="Search by name or subdomain"
+          class="w-full border border-gray-300 rounded-lg px-3 py-2"
+        />
+        <select
+          value={status()}
+          onChange={(e) => setStatus(e.currentTarget.value)}
+          class="border border-gray-300 rounded-lg px-3 py-2 bg-white"
+        >
+          <option value="all">All statuses</option>
+          <option value="active">Active</option>
+          <option value="pending">Pending</option>
+          <option value="deactivated">Deactivated</option>
+          <option value="provisioning_failed">Provisioning failed</option>
+          <option value="suspended">Suspended</option>
+        </select>
+      </div>
+
       <Show when={relays.loading}>
         <p class="text-gray-500">Loading relays...</p>
       </Show>
@@ -25,9 +61,9 @@ export default function RelayList() {
         <p class="text-red-600">Failed to load relays.</p>
       </Show>
 
-      <Show when={(relays()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No relays yet. Create one to get started.</p>}>
+      <Show when={(filtered().length ?? 0) > 0} fallback={<p class="text-gray-500">No relays match your filters.</p>}>
         <ul class="space-y-3">
-          <For each={relays()}>
+          <For each={filtered()}>
             {(relay) => (
               <li>
                 <A