Add jury assignment transfer, cap redistribution, and learning hub overhaul

- Add getTransferCandidates/transferAssignments procedures for targeted
  assignment moves between jurors with TOCTOU guards and audit logging
- Add getOverCapPreview/redistributeOverCap for auto-redistributing
  assignments when a juror's cap is lowered below their current load
- Add TransferAssignmentsDialog (2-step: select projects, pick destinations)
- Extend InlineMemberCap with over-cap detection and redistribute banner
- Extend getReassignmentHistory to show ASSIGNMENT_TRANSFER and CAP_REDISTRIBUTE events
- Learning hub: replace ResourceType/CohortLevel enums with accessJson JSONB,
  add coverImageKey, resource detail pages for jury/mentor, shared renderer
- Migration: 20260221200000_learning_hub_overhaul

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

src/app/(admin)/admin/learning/[id]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
@@ -8,15 +8,11 @@ import { trpc } from '@/lib/trpc/client'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
 import { Switch } from '@/components/ui/switch'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Separator } from '@/components/ui/separator'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import {
   Select,
   SelectContent,
@@ -24,6 +20,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -35,46 +39,62 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
-import { Skeleton } from '@/components/ui/skeleton'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { toast } from 'sonner'
 import {
   ArrowLeft,
   Save,
   Loader2,
-  FileText,
-  Video,
-  Link as LinkIcon,
-  File,
-  Trash2,
+  Settings,
   Eye,
+  Trash2,
   AlertCircle,
 } from 'lucide-react'
 
-// Dynamically import BlockEditor to avoid SSR issues
+// Dynamically import editors to avoid SSR issues
 const BlockEditor = dynamic(
   () => import('@/components/shared/block-editor').then((mod) => mod.BlockEditor),
   {
     ssr: false,
     loading: () => (
-      <div className="min-h-[300px] rounded-lg border bg-muted/20 animate-pulse" />
+      <div className="mx-auto max-w-3xl min-h-[300px] rounded-lg border bg-muted/20 animate-pulse" />
     ),
   }
 )
 
-const resourceTypeOptions = [
-  { value: 'DOCUMENT', label: 'Document', icon: FileText },
-  { value: 'PDF', label: 'PDF', icon: FileText },
-  { value: 'VIDEO', label: 'Video', icon: Video },
-  { value: 'LINK', label: 'External Link', icon: LinkIcon },
-  { value: 'OTHER', label: 'Other', icon: File },
+const ResourceRenderer = dynamic(
+  () => import('@/components/shared/resource-renderer').then((mod) => mod.ResourceRenderer),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="mx-auto max-w-3xl min-h-[200px] rounded-lg border bg-muted/20 animate-pulse" />
+    ),
+  }
+)
+
+const ROLE_OPTIONS = [
+  { value: 'JURY_MEMBER', label: 'Jury Members' },
+  { value: 'MENTOR', label: 'Mentors' },
+  { value: 'OBSERVER', label: 'Observers' },
+  { value: 'APPLICANT', label: 'Applicants' },
+  { value: 'AWARD_MASTER', label: 'Award Masters' },
 ]
 
-const cohortOptions = [
-  { value: 'ALL', label: 'All Members', description: 'Visible to everyone' },
-  { value: 'SEMIFINALIST', label: 'Semi-finalists', description: 'Visible to semi-finalist evaluators' },
-  { value: 'FINALIST', label: 'Finalists', description: 'Visible to finalist evaluators only' },
-]
+type AccessRule =
+  | { type: 'everyone' }
+  | { type: 'roles'; roles: string[] }
+  | { type: 'jury_group'; juryGroupIds: string[] }
+  | { type: 'round'; roundIds: string[] }
+
+function parseAccessJson(accessJson: unknown): { mode: 'everyone' | 'roles'; roles: string[] } {
+  if (!accessJson || !Array.isArray(accessJson) || accessJson.length === 0) {
+    return { mode: 'everyone', roles: [] }
+  }
+  const firstRule = accessJson[0] as AccessRule
+  if (firstRule.type === 'roles' && 'roles' in firstRule) {
+    return { mode: 'roles', roles: firstRule.roles }
+  }
+  return { mode: 'everyone', roles: [] }
+}
 
 export default function EditLearningResourcePage() {
   const params = useParams()
@@ -89,11 +109,14 @@ export default function EditLearningResourcePage() {
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
   const [contentJson, setContentJson] = useState<string>('')
-  const [resourceType, setResourceType] = useState<string>('DOCUMENT')
-  const [cohortLevel, setCohortLevel] = useState<string>('ALL')
   const [externalUrl, setExternalUrl] = useState('')
   const [isPublished, setIsPublished] = useState(false)
   const [programId, setProgramId] = useState<string | null>(null)
+  const [previewing, setPreviewing] = useState(false)
+
+  // Access rules state
+  const [accessMode, setAccessMode] = useState<'everyone' | 'roles'>('everyone')
+  const [selectedRoles, setSelectedRoles] = useState<string[]>([])
 
   // API
   const { data: programs } = trpc.program.list.useQuery({ status: 'ACTIVE' })
@@ -115,11 +138,13 @@ export default function EditLearningResourcePage() {
       setTitle(resource.title)
       setDescription(resource.description || '')
       setContentJson(resource.contentJson ? JSON.stringify(resource.contentJson) : '')
-      setResourceType(resource.resourceType)
-      setCohortLevel(resource.cohortLevel)
       setExternalUrl(resource.externalUrl || '')
       setIsPublished(resource.isPublished)
       setProgramId(resource.programId)
+
+      const { mode, roles } = parseAccessJson(resource.accessJson)
+      setAccessMode(mode)
+      setSelectedRoles(roles)
     }
   }, [resource])
 
@@ -134,74 +159,88 @@ export default function EditLearningResourcePage() {
       await fetch(url, {
         method: 'PUT',
         body: file,
-        headers: {
-          'Content-Type': file.type,
-        },
+        headers: { 'Content-Type': file.type },
       })
 
       const minioEndpoint = process.env.NEXT_PUBLIC_MINIO_ENDPOINT || 'http://localhost:9000'
       return `${minioEndpoint}/${bucket}/${objectKey}`
-    } catch (error) {
+    } catch {
       toast.error('Failed to upload file')
-      throw error
+      throw new Error('Upload failed')
     }
   }
 
-  const handleSubmit = async () => {
+  const buildAccessJson = (): AccessRule[] | null => {
+    if (accessMode === 'everyone') return null
+    if (accessMode === 'roles' && selectedRoles.length > 0) {
+      return [{ type: 'roles', roles: selectedRoles }]
+    }
+    return null
+  }
+
+  const handleSubmit = useCallback(async () => {
     if (!title.trim()) {
       toast.error('Please enter a title')
       return
     }
 
-    if (resourceType === 'LINK' && !externalUrl) {
-      toast.error('Please enter an external URL')
-      return
-    }
-
     try {
       await updateResource.mutateAsync({
         id: resourceId,
+        programId,
         title,
-        description: description || undefined,
+        description: description || null,
         contentJson: contentJson ? JSON.parse(contentJson) : undefined,
-        resourceType: resourceType as 'PDF' | 'VIDEO' | 'DOCUMENT' | 'LINK' | 'OTHER',
-        cohortLevel: cohortLevel as 'ALL' | 'SEMIFINALIST' | 'FINALIST',
+        accessJson: buildAccessJson(),
         externalUrl: externalUrl || null,
         isPublished,
       })
 
-      toast.success('Resource updated successfully')
-      router.push('/admin/learning')
+      toast.success('Resource updated')
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Failed to update resource')
     }
-  }
+  }, [title, description, contentJson, externalUrl, isPublished, programId, accessMode, selectedRoles, resourceId])
 
   const handleDelete = async () => {
     try {
       await deleteResource.mutateAsync({ id: resourceId })
-      toast.success('Resource deleted successfully')
+      toast.success('Resource deleted')
       router.push('/admin/learning')
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Failed to delete resource')
     }
   }
 
+  // Ctrl+S save
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault()
+        handleSubmit()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleSubmit])
+
   if (isLoading) {
     return (
-      <div className="space-y-6">
-        <div className="flex items-center gap-4">
-          <Skeleton className="h-9 w-40" />
-        </div>
-        <Skeleton className="h-8 w-64" />
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2 space-y-6">
-            <Skeleton className="h-64 w-full" />
-            <Skeleton className="h-96 w-full" />
+      <div className="flex min-h-screen flex-col">
+        <div className="sticky top-0 z-30 flex items-center justify-between border-b bg-background/95 px-4 py-2">
+          <Skeleton className="h-8 w-20" />
+          <div className="flex gap-2">
+            <Skeleton className="h-8 w-20" />
+            <Skeleton className="h-8 w-20" />
+            <Skeleton className="h-8 w-16" />
           </div>
-          <div className="space-y-6">
-            <Skeleton className="h-48 w-full" />
-            <Skeleton className="h-32 w-full" />
+        </div>
+        <div className="flex-1 px-4 py-8">
+          <div className="mx-auto max-w-3xl space-y-4">
+            <Skeleton className="h-10 w-2/3" />
+            <Skeleton className="h-6 w-1/3" />
+            <Skeleton className="h-px w-full" />
+            <Skeleton className="h-96 w-full" />
           </div>
         </div>
       </div>
@@ -210,7 +249,7 @@ export default function EditLearningResourcePage() {
 
   if (error || !resource) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-6 p-6">
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />
           <AlertTitle>Resource not found</AlertTitle>
@@ -229,253 +268,250 @@ export default function EditLearningResourcePage() {
   }
 
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" asChild className="-ml-4">
+    <div className="flex min-h-screen flex-col">
+      {/* Sticky toolbar */}
+      <div className="sticky top-0 z-30 flex items-center justify-between border-b bg-background/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <Button variant="ghost" size="sm" asChild>
           <Link href="/admin/learning">
             <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to Learning Hub
+            Back
           </Link>
         </Button>
-      </div>
 
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Edit Resource</h1>
-          <p className="text-muted-foreground">
-            Update this learning resource
-          </p>
-        </div>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="outline" className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
-              <Trash2 className="mr-2 h-4 w-4" />
-              Delete
-            </Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Delete Resource</AlertDialogTitle>
-              <AlertDialogDescription>
-                Are you sure you want to delete &quot;{resource.title}&quot;? This action
-                cannot be undone.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={handleDelete}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              >
-                {deleteResource.isPending ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                ) : null}
-                Delete
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant={previewing ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setPreviewing(!previewing)}
+          >
+            <Eye className="mr-2 h-4 w-4" />
+            {previewing ? 'Edit' : 'Preview'}
+          </Button>
 
-      <div className="grid gap-6 lg:grid-cols-3">
-        {/* Main content */}
-        <div className="lg:col-span-2 space-y-6">
-          {/* Basic Info */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Resource Details</CardTitle>
-              <CardDescription>
-                Basic information about this resource
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="title">Title *</Label>
-                <Input
-                  id="title"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  placeholder="e.g., Ocean Conservation Best Practices"
-                />
-              </div>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Settings className="mr-2 h-4 w-4" />
+                Settings
+              </Button>
+            </SheetTrigger>
+            <SheetContent className="overflow-y-auto">
+              <SheetHeader>
+                <SheetTitle>Resource Settings</SheetTitle>
+                <SheetDescription>
+                  Configure publishing, access, and metadata
+                </SheetDescription>
+              </SheetHeader>
 
-              <div className="space-y-2">
-                <Label htmlFor="description">Short Description</Label>
-                <Textarea
-                  id="description"
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Brief description of this resource"
-                  rows={2}
-                  maxLength={500}
-                />
-              </div>
+              <div className="mt-6 space-y-6">
+                {/* Publish toggle */}
+                <div className="flex items-center justify-between">
+                  <div>
+                    <Label>Published</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Make visible to users
+                    </p>
+                  </div>
+                  <Switch
+                    checked={isPublished}
+                    onCheckedChange={setIsPublished}
+                  />
+                </div>
 
-              <div className="grid gap-4 sm:grid-cols-2">
+                <Separator />
+
+                {/* Program */}
                 <div className="space-y-2">
-                  <Label htmlFor="type">Resource Type</Label>
-                  <Select value={resourceType} onValueChange={setResourceType}>
-                    <SelectTrigger id="type">
-                      <SelectValue />
+                  <Label>Program</Label>
+                  <Select
+                    value={programId || 'global'}
+                    onValueChange={(v) => setProgramId(v === 'global' ? null : v)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select program" />
                     </SelectTrigger>
                     <SelectContent>
-                      {resourceTypeOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          <div className="flex items-center gap-2">
-                            <option.icon className="h-4 w-4" />
-                            {option.label}
-                          </div>
+                      <SelectItem value="global">Global (All Programs)</SelectItem>
+                      {programs?.map((program) => (
+                        <SelectItem key={program.id} value={program.id}>
+                          {program.year} Edition
                         </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="cohort">Access Level</Label>
-                  <Select value={cohortLevel} onValueChange={setCohortLevel}>
-                    <SelectTrigger id="cohort">
+                <Separator />
+
+                {/* Access Rules */}
+                <div className="space-y-3">
+                  <Label>Access Rules</Label>
+                  <Select value={accessMode} onValueChange={(v) => setAccessMode(v as 'everyone' | 'roles')}>
+                    <SelectTrigger>
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      {cohortOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
+                      <SelectItem value="everyone">Everyone</SelectItem>
+                      <SelectItem value="roles">By Role</SelectItem>
                     </SelectContent>
                   </Select>
-                </div>
-              </div>
 
-              {resourceType === 'LINK' && (
+                  {accessMode === 'roles' && (
+                    <div className="space-y-2 rounded-lg border p-3">
+                      {ROLE_OPTIONS.map((role) => (
+                        <label key={role.value} className="flex items-center gap-2 text-sm">
+                          <Checkbox
+                            checked={selectedRoles.includes(role.value)}
+                            onCheckedChange={(checked) => {
+                              setSelectedRoles(
+                                checked
+                                  ? [...selectedRoles, role.value]
+                                  : selectedRoles.filter((r) => r !== role.value)
+                              )
+                            }}
+                          />
+                          {role.label}
+                        </label>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <Separator />
+
+                {/* External URL */}
                 <div className="space-y-2">
-                  <Label htmlFor="url">External URL *</Label>
+                  <Label>External URL</Label>
                   <Input
-                    id="url"
                     type="url"
                     value={externalUrl}
                     onChange={(e) => setExternalUrl(e.target.value)}
                     placeholder="https://example.com/resource"
                   />
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Content Editor */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Content</CardTitle>
-              <CardDescription>
-                Rich text content with images and videos. Type / for commands.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <BlockEditor
-                key={resourceId}
-                initialContent={contentJson || undefined}
-                onChange={setContentJson}
-                onUploadFile={handleUploadFile}
-                className="min-h-[300px]"
-              />
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Sidebar */}
-        <div className="space-y-6">
-          {/* Publish Settings */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Publish Settings</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <Label htmlFor="published">Published</Label>
-                  <p className="text-sm text-muted-foreground">
-                    Make this resource visible to jury members
+                  <p className="text-xs text-muted-foreground">
+                    Optional link to an external resource
                   </p>
                 </div>
-                <Switch
-                  id="published"
-                  checked={isPublished}
-                  onCheckedChange={setIsPublished}
-                />
-              </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="program">Program</Label>
-                <Select
-                  value={programId || 'global'}
-                  onValueChange={(v) => setProgramId(v === 'global' ? null : v)}
-                >
-                  <SelectTrigger id="program">
-                    <SelectValue placeholder="Select program" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="global">Global (All Programs)</SelectItem>
-                    {programs?.map((program) => (
-                      <SelectItem key={program.id} value={program.id}>
-                        {program.year} Edition
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </CardContent>
-          </Card>
+                <Separator />
 
-          {/* Statistics */}
-          {stats && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Eye className="h-5 w-5" />
-                  Statistics
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <p className="text-2xl font-semibold">{stats.totalViews}</p>
-                    <p className="text-sm text-muted-foreground">Total views</p>
-                  </div>
-                  <div>
-                    <p className="text-2xl font-semibold">{stats.uniqueUsers}</p>
-                    <p className="text-sm text-muted-foreground">Unique users</p>
+                {/* Statistics */}
+                {stats && (
+                  <div className="space-y-2">
+                    <Label>Statistics</Label>
+                    <div className="grid grid-cols-2 gap-4 rounded-lg border p-3">
+                      <div>
+                        <p className="text-2xl font-semibold">{stats.totalViews}</p>
+                        <p className="text-xs text-muted-foreground">Total views</p>
+                      </div>
+                      <div>
+                        <p className="text-2xl font-semibold">{stats.uniqueUsers}</p>
+                        <p className="text-xs text-muted-foreground">Unique users</p>
+                      </div>
+                    </div>
                   </div>
+                )}
+
+                <Separator />
+
+                {/* Danger Zone */}
+                <div className="space-y-2">
+                  <Label className="text-destructive">Danger Zone</Label>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="w-full text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                      >
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Delete Resource
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Delete Resource</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Are you sure you want to delete &quot;{resource.title}&quot;?
+                          This action cannot be undone.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                          onClick={handleDelete}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                          {deleteResource.isPending ? (
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          ) : null}
+                          Delete
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
                 </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Actions */}
-          <Card>
-            <CardContent className="pt-6">
-              <div className="flex flex-col gap-2">
-                <Button
-                  onClick={handleSubmit}
-                  disabled={updateResource.isPending || !title.trim()}
-                  className="w-full"
-                >
-                  {updateResource.isPending ? (
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  ) : (
-                    <Save className="mr-2 h-4 w-4" />
-                  )}
-                  Save Changes
-                </Button>
-                <Button variant="outline" asChild className="w-full">
-                  <Link href="/admin/learning">Cancel</Link>
-                </Button>
               </div>
-            </CardContent>
-          </Card>
+            </SheetContent>
+          </Sheet>
+
+          <Button
+            size="sm"
+            onClick={handleSubmit}
+            disabled={updateResource.isPending || !title.trim()}
+          >
+            {updateResource.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
+            Save
+          </Button>
         </div>
       </div>
+
+      {/* Content area */}
+      <div className="flex-1 px-4 py-8">
+        {previewing ? (
+          <ResourceRenderer
+            title={title || 'Untitled'}
+            description={description || null}
+            contentJson={contentJson ? JSON.parse(contentJson) : null}
+          />
+        ) : (
+          <div className="mx-auto max-w-3xl space-y-4">
+            {/* Inline title */}
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Untitled"
+              className="w-full border-0 bg-transparent text-3xl font-bold tracking-tight text-foreground placeholder:text-muted-foreground/40 focus:outline-none sm:text-4xl"
+            />
+
+            {/* Inline description */}
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Add a description..."
+              className="w-full border-0 bg-transparent text-lg text-muted-foreground placeholder:text-muted-foreground/30 focus:outline-none"
+            />
+
+            {/* Divider */}
+            <hr className="border-border" />
+
+            {/* Block editor */}
+            <BlockEditor
+              key={resourceId}
+              initialContent={contentJson || undefined}
+              onChange={setContentJson}
+              onUploadFile={handleUploadFile}
+              className="min-h-[400px]"
+            />
+          </div>
+        )}
+      </div>
     </div>
   )
 }