Campaign editing + .onion Tor routing

Campaign edit: new /ads/[id] edit page + updateCampaign/updateCreatives
actions (owner-scoped). Edit name, destination URL, daily budget, max
bid/click, and per-format creative copy/colours/logo with live preview.
"Edit" link added to each campaign in the list.

.onion routing: lib/onion.ts detects v3 .onion hosts and routes their
fetches through a Tor SOCKS5 proxy (TOR_SOCKS_URL, socks5h so Tor resolves
the host). Wired into the audit fetcher, ad brand extraction, and logo
discovery. Without TOR_SOCKS_URL, .onion fetches fail fast with a clear
message; everything else is a normal fetch. Adds the `socks` dep.

Refactor: moved pure format constants/types to lib/ads/formats.ts so
client components don't drag the LLM/Tor stack (socks→node:net) into the
browser bundle.

Verified: onion detection + graceful no-Tor error; full production build
passes with /ads/[id] compiled.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ralyodio

app/(app)/ads/[id]/edit-form.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { updateCampaign, updateCreatives, uploadAdAsset } from "@/app/actions/ads";
+import { AD_FORMATS, type AdCreative, type AdFormatId } from "@/lib/ads/formats";
+import { AdPreview } from "@/components/ads/ad-preview";
+
+type Campaign = {
+  id: string;
+  name: string;
+  destinationUrl: string;
+  dailyBudgetCents: number;
+  bidCredits: number;
+  status: string;
+};
+
+export function EditCampaignForm({
+  campaign,
+  creatives: initial,
+}: {
+  campaign: Campaign;
+  creatives: (AdCreative & { id: string })[];
+}) {
+  const router = useRouter();
+  const [saving, startSave] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  const [name, setName] = useState(campaign.name);
+  const [url, setUrl] = useState(campaign.destinationUrl);
+  const [budget, setBudget] = useState(campaign.dailyBudgetCents / 100);
+  const [bid, setBid] = useState((campaign.bidCredits * 5) / 100); // credits → $
+  const [creatives, setCreatives] = useState(initial);
+  const [active, setActive] = useState<AdFormatId>(initial[0]?.format ?? "banner_300x250");
+  const [uploading, setUploading] = useState(false);
+
+  const current = creatives.find((c) => c.format === active) ?? creatives[0];
+
+  function patchActive(patch: Partial<AdCreative>) {
+    setCreatives((cs) => cs.map((c) => (c.format === active ? { ...c, ...patch } : c)));
+  }
+  function patchAll(patch: Partial<AdCreative>) {
+    setCreatives((cs) => cs.map((c) => ({ ...c, ...patch })));
+  }
+
+  async function onUploadLogo(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    const fd = new FormData();
+    fd.set("file", file);
+    const res = await uploadAdAsset(fd);
+    setUploading(false);
+    if (!res.ok) return setError(res.error);
+    patchAll({ logoUrl: res.url });
+  }
+
+  function save() {
+    setError(null);
+    setSaved(false);
+    startSave(async () => {
+      const s = await updateCampaign({
+        id: campaign.id,
+        name,
+        destinationUrl: url,
+        dailyBudgetCents: Math.round(budget * 100),
+        bidCredits: Math.max(1, Math.round((bid * 100) / 5)),
+      });
+      if (!s.ok) return setError(s.error);
+      const c = await updateCreatives({
+        campaignId: campaign.id,
+        creatives: creatives.map((cr) => ({ ...cr })),
+      });
+      if (!c.ok) return setError(c.error);
+      setSaved(true);
+      router.refresh();
+    });
+  }
+
+  return (
+    <div className="mt-6 space-y-6">
+      {error && <div className="card border-red-500/40 p-3 text-sm text-red-400">{error}</div>}
+      {saved && <div className="card border-[var(--color-accent)]/40 p-3 text-sm text-[var(--color-accent)]">Saved.</div>}
+
+      {/* Settings */}
+      <div className="card space-y-4 p-5">
+        <h2 className="font-semibold">Settings</h2>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="block">
+            <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">Name</span>
+            <input className="input mt-1" value={name} onChange={(e) => setName(e.target.value)} />
+          </label>
+          <label className="block">
+            <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">Destination URL</span>
+            <input className="input mt-1" type="url" value={url} onChange={(e) => setUrl(e.target.value)} />
+          </label>
+          <label className="block">
+            <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">Daily budget ($)</span>
+            <input
+              className="input mt-1"
+              type="number"
+              min={1}
+              step={1}
+              value={budget}
+              onChange={(e) => setBudget(Math.max(0, Number(e.target.value)))}
+            />
+          </label>
+          <label className="block">
+            <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">Max bid / click ($)</span>
+            <input
+              className="input mt-1"
+              type="number"
+              min={0.05}
+              step={0.05}
+              value={bid}
+              onChange={(e) => setBid(Math.max(0.05, Number(e.target.value)))}
+            />
+          </label>
+        </div>
+      </div>
+
+      {/* Creative editor */}
+      {current && (
+        <div className="card space-y-4 p-5">
+          <div className="flex flex-wrap items-start gap-4">
+            {AD_FORMATS.map((f) => {
+              const c = creatives.find((x) => x.format === f.id);
+              if (!c) return null;
+              return (
+                <button
+                  key={f.id}
+                  onClick={() => setActive(f.id)}
+                  className={`rounded-lg p-2 ${active === f.id ? "ring-2 ring-[var(--color-accent)]" : "opacity-80 hover:opacity-100"}`}
+                  style={{ maxWidth: f.w > 360 ? 360 : f.w + 16 }}
+                >
+                  <div style={{ overflowX: "auto" }}>
+                    <AdPreview creative={c} />
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <label className="block">
+              <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">Headline</span>
+              <input className="input mt-1" value={current.headline} maxLength={80} onChange={(e) => patchActive({ headline: e.target.value })} />
+            </label>
+            <label className="block">
+              <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">CTA</span>
+              <input className="input mt-1" value={current.ctaText} maxLength={24} onChange={(e) => patchActive({ ctaText: e.target.value })} />
+            </label>
+            <label className="block sm:col-span-2">
+              <span className="text-xs uppercase tracking-wider text-[var(--color-muted)]">Body</span>
+              <input className="input mt-1" value={current.body} maxLength={140} onChange={(e) => patchActive({ body: e.target.value })} />
+            </label>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-5">
+            <ColorField label="Background" value={current.bgColor} onChange={(v) => patchAll({ bgColor: v })} />
+            <ColorField label="Text" value={current.fgColor} onChange={(v) => patchAll({ fgColor: v })} />
+            <ColorField label="Accent" value={current.accentColor} onChange={(v) => patchAll({ accentColor: v })} />
+            <label className="btn cursor-pointer text-sm">
+              {uploading ? "Uploading…" : current.logoUrl ? "Replace logo" : "Upload logo"}
+              <input type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" className="hidden" onChange={onUploadLogo} disabled={uploading} />
+            </label>
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-end">
+        <button className="btn btn-primary" onClick={save} disabled={saving}>
+          {saving ? "Saving…" : "Save changes"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <label className="flex items-center gap-2">
+      <input type="color" value={value} onChange={(e) => onChange(e.target.value)} className="h-8 w-8 cursor-pointer rounded border border-[var(--color-border)] bg-transparent" aria-label={label} />
+      <span className="text-xs text-[var(--color-muted)]">
+        {label}
+        <br />
+        <span className="font-mono">{value}</span>
+      </span>
+    </label>
+  );
+}

app/(app)/ads/[id]/page.tsx

@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+import type { AdCreative, AdFormatId } from "@/lib/ads/creative";
+import { EditCampaignForm } from "./edit-form";
+
+export const metadata = { title: "Edit campaign" };
+
+type CreativeRow = {
+  id: string;
+  format: AdFormatId;
+  headline: string;
+  body: string;
+  cta_text: string;
+  image_url: string | null;
+  logo_url: string | null;
+  bg_color: string;
+  fg_color: string;
+  accent_color: string;
+  font_family: string;
+};
+
+export default async function EditCampaignPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) notFound();
+
+  const { data: campaign } = await supabase
+    .from("ad_campaigns")
+    .select("id, name, destination_url, daily_budget_cents, bid_credits, status, ref_slug")
+    .eq("id", id)
+    .eq("owner_id", user.id)
+    .maybeSingle();
+  if (!campaign) notFound();
+
+  const { data: creativeRows } = await supabase
+    .from("ad_creatives")
+    .select("id, format, headline, body, cta_text, image_url, logo_url, bg_color, fg_color, accent_color, font_family")
+    .eq("campaign_id", id)
+    .order("format");
+
+  const creatives: (AdCreative & { id: string })[] = ((creativeRows as CreativeRow[]) ?? []).map(
+    (r) => ({
+      id: r.id,
+      format: r.format,
+      headline: r.headline,
+      body: r.body,
+      ctaText: r.cta_text,
+      bgColor: r.bg_color,
+      fgColor: r.fg_color,
+      accentColor: r.accent_color,
+      fontFamily: r.font_family,
+      logoUrl: r.logo_url,
+      imageUrl: r.image_url,
+    }),
+  );
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <Link href="/ads" className="text-sm text-[var(--color-muted)]">
+        ← Ad campaigns
+      </Link>
+      <div className="mt-4 flex items-center justify-between gap-3">
+        <h1 className="text-3xl font-bold">Edit campaign</h1>
+        <span className="badge font-mono">{campaign.ref_slug}</span>
+      </div>
+      <EditCampaignForm
+        campaign={{
+          id: campaign.id,
+          name: campaign.name,
+          destinationUrl: campaign.destination_url,
+          dailyBudgetCents: campaign.daily_budget_cents,
+          bidCredits: campaign.bid_credits ?? 4,
+          status: campaign.status,
+        }}
+        creatives={creatives}
+      />
+    </div>
+  );
+}

app/(app)/ads/new/form.tsx

@@ -3,7 +3,7 @@
 import { useState, useTransition, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { previewAds, saveCampaign, uploadAdAsset } from "@/app/actions/ads";
-import { AD_FORMATS, type AdCreative, type AdFormatId } from "@/lib/ads/creative";
+import { AD_FORMATS, type AdCreative, type AdFormatId } from "@/lib/ads/formats";
 import type { SiteBrand } from "@/lib/ads/brand";
 import { AdPreview } from "@/components/ads/ad-preview";
 

app/(app)/ads/page.tsx

@@ -72,6 +72,9 @@ export default async function AdsPage() {
               </div>
               <div className="flex items-center gap-3">
                 <span className="badge whitespace-nowrap">{c.status}</span>
+                <Link href={`/ads/${c.id}`} className="btn text-sm">
+                  Edit
+                </Link>
                 <CampaignActions id={c.id} status={c.status} />
               </div>
             </li>

app/actions/ads.ts

@@ -169,6 +169,83 @@ export async function saveCampaign(input: {
   return { ok: true, id: campaign.data.id, refSlug: campaign.data.ref_slug };
 }
 
+// --- Campaign editing (advertiser) ---
+
+export async function updateCampaign(input: {
+  id: string;
+  name?: string;
+  dailyBudgetCents?: number;
+  bidCredits?: number;
+  destinationUrl?: string;
+}): Promise<{ ok: true } | { ok: false; error: string }> {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return { ok: false, error: "Not authenticated." };
+
+  const patch: Record<string, unknown> = {};
+  if (typeof input.name === "string" && input.name.trim()) {
+    patch.name = input.name.trim().slice(0, 120);
+  }
+  if (Number.isFinite(input.dailyBudgetCents)) {
+    patch.daily_budget_cents = Math.max(0, Math.round(input.dailyBudgetCents!));
+  }
+  if (Number.isFinite(input.bidCredits)) {
+    patch.bid_credits = Math.min(200, Math.max(1, Math.round(input.bidCredits!)));
+  }
+  if (typeof input.destinationUrl === "string" && input.destinationUrl.trim()) {
+    const check = isAllowedTargetUrl(input.destinationUrl);
+    if (!check.ok) return { ok: false, error: check.reason };
+    patch.destination_url = check.url;
+    patch.destination_domain = domainOf(check.url);
+  }
+  if (Object.keys(patch).length === 0) return { ok: true };
+
+  const { error } = await supabase
+    .from("ad_campaigns")
+    .update(patch)
+    .eq("id", input.id)
+    .eq("owner_id", user.id);
+  if (error) return { ok: false, error: error.message };
+  revalidatePath("/ads");
+  revalidatePath(`/ads/${input.id}`);
+  return { ok: true };
+}
+
+export async function updateCreatives(input: {
+  campaignId: string;
+  creatives: (Partial<AdCreative> & { id: string })[];
+}): Promise<{ ok: true } | { ok: false; error: string }> {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return { ok: false, error: "Not authenticated." };
+
+  for (const c of input.creatives) {
+    const cleaned = cleanCreative(c);
+    if (!cleaned) continue;
+    const { error } = await supabase
+      .from("ad_creatives")
+      .update({
+        headline: cleaned.headline,
+        body: cleaned.body,
+        cta_text: cleaned.ctaText,
+        image_url: cleaned.imageUrl,
+        logo_url: cleaned.logoUrl,
+        bg_color: cleaned.bgColor,
+        fg_color: cleaned.fgColor,
+        accent_color: cleaned.accentColor,
+      })
+      .eq("id", c.id)
+      .eq("owner_id", user.id);
+    if (error) return { ok: false, error: error.message };
+  }
+  revalidatePath(`/ads/${input.campaignId}`);
+  return { ok: true };
+}
+
 // --- Campaign activation (advertiser) ---
 
 const CAMPAIGN_STATUSES = new Set(["active", "paused", "draft"]);

components/ads/ad-preview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { AdCreative } from "@/lib/ads/creative";
-import { formatSpec } from "@/lib/ads/creative";
+import type { AdCreative } from "@/lib/ads/formats";
+import { formatSpec } from "@/lib/ads/formats";
 
 // Live React mirror of renderCreativeHtml (lib/ads/creative.ts). Kept visually
 // in sync with the served HTML so the editor preview matches production.