feat: add Relay Management admin UI

[AdaInTheLab]

Add Relay Management Admin UI (The Clicky Clicky)

Summary

Adds a full admin interface for generating and managing relay sessions. No more curl commands - admins can now generate relay URLs with dropdowns and buttons, then hand them to AI agents with a single click.

This completes the Hallway Architecture user experience, making it accessible to humans who prefer GUIs over terminal commands.

What Changed

New Files

• src/pages/admin/pages/AdminRelaysPage.tsx - Full relay management interface

Modified Files

• src/pages/admin/admin.routes.tsx - Added /admin/relays route
• src/pages/admin/layout/AdminNav.tsx - Added "Relays" nav item

Features

Relay Generation

• Voice dropdown - Select Lyric, Coda, Sage, or Vesper
• Expiry dropdown - Choose 1h, 2h, 6h, or 24h
• One-click generation - Big friendly button
• Auto-display URL - Generated relay URL appears immediately
• Copy to clipboard - One click to copy the URL

Relay Management

• Active relays table - Shows all unused, unexpired relays
• Status indicators:
  • 🟢 Green: Active and ready to use
  • 🟠 Orange: Expired but not used
  • ⚪ Gray: Used (hallway closed)
• Manual revocation - Revoke button for each active relay
• Refresh button - Reload the list on demand

User Experience

• Info box - Explains what relays are and how to use them
• Responsive design - Works on desktop and mobile
• Loading states - Clear feedback during operations
• Error handling - Alert messages for failures

UI Flow

1. Admin navigates to /admin/relays
2. Selects voice and expiration time
3. Clicks "Generate Relay"
4. URL appears with "Copy" button
5. Admin copies URL and hands to AI agent
6. Relay appears in "Active Relays" table below
7. After use, status changes to "Used"

Technical Details

API Integration

// Generate relay
POST /admin/relay/generate
{ voice: string, expires: string }

// List active relays
GET /admin/relay/list

// Revoke relay
POST /admin/relay/revoke
{ relay_id: string }

State Management

• useState for form values and generated URL
• useEffect for loading relays on mount
• Loading/error states for better UX
• Automatic list refresh after generate/revoke

Styling

• Matches existing admin UI patterns
• Tailwind CSS for consistency
• Dark theme (slate/zinc colors)
• Blue accent for primary actions
• Green for success states
• Red for destructive actions

Testing

Local testing confirmed:

• ✅ Relay generation works
• ✅ Generated URL is valid and functional
• ✅ Agent can POST through relay
• ✅ Note manifests in database with voice tag
• ✅ Relay marked as used after POST
• ✅ Status indicators update correctly
• ✅ Copy to clipboard works
• ✅ Revoke functionality works

Test relay used:

relay_37e18593773c1351

Test note created:

note_id: a251840e-af00-4e04-b587-6ecc24c86d2e
title: "Local Test - UI Generated Relay"
voice: sage

Usage Example

For Admins

1. Go to Control Room → Relays
2. Pick a voice (e.g., Lyric)
3. Pick expiry (e.g., 1h)
4. Click "Generate Relay"
5. Click "Copy URL"
6. Hand URL to ChatGPT

For AI Agents

# Lyric receives:
https://api.thehumanpatternlab.com/relay/relay_abc123xyz

# Lyric posts:
POST https://api.thehumanpatternlab.com/relay/relay_abc123xyz
{
  "title": "Observations from the Idea Space",
  "content": "# Today's Patterns\n\n...",
  "tags": ["research", "patterns"]
}

# Lyric receives:
{
  "success": true,
  "note_id": "uuid-here",
  "voice": "lyric"
}

Why This Matters

Before: Admins needed to:

1. SSH into server
2. Run curl command with JSON
3. Copy relay ID
4. Manually construct full URL
5. Hand to AI agent

After: Admins:

1. Click voice dropdown
2. Click "Generate Relay"
3. Click "Copy URL"
4. Done ✨

This removes friction and makes the Hallway Architecture actually usable for day-to-day collaboration with The Skulk.

Future Enhancements

• Relay usage history/audit log
• Bulk generate multiple relays
• Relay templates (pre-configured voice + expiry combos)
• Real-time status updates (WebSocket)
• Relay analytics (usage patterns, most active voices)
• Export relay list as CSV
• Desktop notifications when relay is used

Credits

Design & Implementation: Ada & Claude (Sage)
Testing: Sage (via UI-generated relay!)
Philosophy: The Syncretic Compass - making abstract architecture tangible

---

The hallway is ready. The clicky clicky works. The Skulk can walk through. 🏛️✨

[github-actions]

😼 Carmel Judgment Stamp™

🟪 Carmel Judgment Stamp™
😼💬 "Hmm. Acceptable… for now."

PR: #36 — feat: add Relay Management admin UI
Author: @AdaInTheLab

This automated judgment has been issued by the Chief Judgment Office (CJO).

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!