Implement more stuff

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,10 +1,27 @@
 import { useParams, A } from "@solidjs/router"
-import { createResource, Show } from "solid-js"
-import { getTenantRelay } from "../../lib/api"
+import { createResource, createSignal, Show } from "solid-js"
+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">
-          Deactivate
+        <button
+          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