plresearch-org · edit-ai-opportunity-spaces-r4 · round 4

Round 4: hero image URL field with live preview (tier 2)

@daviddao

Closes r3's I2 item: admins can now edit the hero image field from the same UI that edits every other field on org.plresearch.opportunitySpace, with a live preview thumbnail. 47-line diff, no backend change, no schema change.

Date: 2026-04-20 · Target: open-compute-networks · Previous: r3 (pass) · pass

---

Headline result

What changed

Commit 10dd6ff on src/components/OpportunitySpaceEditor.tsx.

// 1. New section, slotted between description and subfields
<EditSection label="Hero image">
  <EditableField
    value={record.image ?? ''}
    onChange={(v) => setField('image', v)}
    className="text-sm text-gray-600 font-mono"
    placeholder="https://… (paste any public image URL)"
  />
  <ImagePreview url={record.image ?? ''} />
</EditSection>

// 2. New helper at the bottom of the file
function ImagePreview({ url }: { url: string }) {
  const trimmed = url.trim()
  if (!trimmed) {
    return (
      <p className="mt-3 text-xs text-gray-400">
        No image set. Any public HTTPS URL works (Unsplash, your CMS,
        an ATProto blob, …).
      </p>
    )
  }
  return (
    <div className="mt-3 w-60 h-32 bg-gray-100 rounded overflow-hidden border border-gray-200 relative">
      <img
        src={trimmed} alt="hero preview"
        className="w-full h-full object-cover transition-opacity duration-200"
        onError={(e) => { e.currentTarget.style.opacity = '0.25' }}
        onLoad={(e) => { e.currentTarget.style.opacity = '1' }}
      />
    </div>
  )
}

Because the shared component powers the edit routes for all 4 focus areas, this 47-line change turns on image editing for all 15 opportunity-space records at once.

Walkthrough

Tested on production as satyam2.climateai.org. Target: Open Compute Networks under AI & Robotics (picked because the public list page shows the image prominently, so the read path is easy to eyeball).

PDS verification (xrpc)

Two PUTs, two confirmations, no drift:

# after the test save (new URL)
$ curl -sG .../com.atproto.repo.getRecord \
    --data-urlencode "collection=org.plresearch.opportunitySpace" \
    --data-urlencode "rkey=ai--open-compute-networks" | jq '.value | {image, updatedAt}'
{
  "image": "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=1200&q=80",
  "updatedAt": "2026-04-20T20:39:32.498Z"
}

# after the revert save (original URL restored)
{
  "image": "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1200&q=80",
  "updatedAt": "2026-04-20T20:41:11.377Z"
}

Findings

Reproducing