Sprint 4 — Etapa 7 completada. Build limpio, 521/521 tests verdes. Resumen:

Tipos: Resource.processId? eliminado (vestigial); ResourceType ya tenía los 5 valores correctos, sin cambios.

resource-repo.ts: agregado getAllWithCreator() con JOIN a users!created_by (mismo patrón que Etapa 6) y tipo ResourceWithCreator. delete() ahora valida que no haya asignaciones activas en activity_resource_assignments antes de borrar — lanza error explicativo si las hay. Verifiqué ambos contra Supabase real: el JOIN funciona (FK reconocida por PostgREST) y el conteo de guarda también.

Nuevo — src/features/resources/:

resource-display.tsx — labels, colores/íconos por tipo (Lucide: User/Briefcase/Server/Wrench/Package) y ResourceTypeAvatar compartido
ResourceFormSheet.tsx — Sheet reutilizable para crear/editar, usado tanto en el catálogo como en el panel del workspace
ResourceCatalogPage.tsx — página /recursos: búsqueda, filtro por tipo, tabla con badge de tipo, costo, "creado por", editar/eliminar con confirmación
Nuevo — src/components/ui/sheet.tsx: componente shadcn Sheet (no existía), construido sobre @radix-ui/react-dialog que ya estaba instalado — no agregué dependencias nuevas.

ResourcesPanel.tsx rediseñado: ahora solo muestra recursos usados en el proceso actual (derivado de assignedResources), con conteo de actividades por recurso. CRUD completo se mudó a /recursos; el panel solo permite "Nuevo" (catálogo global) y tiene el link "Ver catálogo completo".

Router: ruta /recursos registrada.

ActivityPanel no se tocó, como indicaba el scope.

src/components/ui/sheet.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+const SheetTrigger = SheetPrimitive.Trigger
+const SheetClose = SheetPrimitive.Close
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        left:
+          'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Cerrar</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-left', className)} {...props} />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-base font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/domain/types.ts

@@ -65,7 +65,6 @@ export type ResourceType = 'role' | 'person' | 'system' | 'equipment' | 'supply'
 
 export interface Resource {
   id: UUID
-  processId?: UUID  // opcional — recursos son catálogo global desde Etapa 3
   name: string
   type: ResourceType
   costPerHour: number

src/features/resources/ResourceCatalogPage.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useState } from 'react'
+import { Users2, Search, Plus, Pencil, Trash2 } from 'lucide-react'
+import { AppHeader } from '@/components/AppHeader'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table'
+import { useAuth } from '@/auth/AuthContext'
+import { supabaseResourceRepo, type ResourceWithCreator } from '@/persistence/supabase/resource-repo'
+import { formatCurrency } from '@/lib/format'
+import { RESOURCE_TYPE_LABELS, RESOURCE_TYPE_STYLES, ResourceTypeAvatar } from './resource-display'
+import { ResourceFormSheet } from './ResourceFormSheet'
+import type { Resource, ResourceType } from '@/domain/types'
+
+export function ResourceCatalogPage() {
+  const { user } = useAuth()
+  const [resources, setResources] = useState<ResourceWithCreator[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [typeFilter, setTypeFilter] = useState<ResourceType | 'all'>('all')
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [editing, setEditing] = useState<Resource | undefined>(undefined)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null)
+
+  async function load() {
+    setIsLoading(true)
+    try {
+      const data = await supabaseResourceRepo.getAllWithCreator()
+      setResources(data)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [])
+
+  const filtered = resources.filter((r) => {
+    const matchesName = r.name.toLowerCase().includes(search.toLowerCase())
+    const matchesType = typeFilter === 'all' || r.type === typeFilter
+    return matchesName && matchesType
+  })
+
+  function startCreate() {
+    setEditing(undefined)
+    setSheetOpen(true)
+  }
+
+  function startEdit(resource: Resource) {
+    setEditing(resource)
+    setSheetOpen(true)
+  }
+
+  async function handleSave(resource: Resource) {
+    await supabaseResourceRepo.save(resource, user!.id)
+    await load()
+  }
+
+  async function handleDelete(resourceId: string) {
+    setDeleteError(null)
+    try {
+      await supabaseResourceRepo.delete(resourceId)
+      setConfirmingDeleteId(null)
+      await load()
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'No se pudo eliminar el recurso')
+      setConfirmingDeleteId(null)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <AppHeader />
+      <div className="max-w-4xl mx-auto px-6 py-8">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-6">
+          <div>
+            <h1 className="text-[18px] font-medium">Catálogo de recursos</h1>
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <Users2 className="h-3.5 w-3.5 text-muted-foreground" />
+              <p className="text-[12px] text-muted-foreground">
+                Compartido con todo el equipo · {resources.length} recurso{resources.length !== 1 ? 's' : ''}
+              </p>
+            </div>
+          </div>
+          <Button onClick={startCreate} className="gap-2 text-white" style={{ background: '#F59845' }}>
+            <Plus className="h-4 w-4" />
+            Nuevo recurso
+          </Button>
+        </div>
+
+        {deleteError && (
+          <div className="mb-4 px-3 py-2 rounded-lg text-[12px] border border-destructive/30 bg-destructive/10 text-destructive">
+            {deleteError}
+          </div>
+        )}
+
+        {/* Toolbar */}
+        <div className="flex items-center gap-2 mb-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Buscar recurso por nombre..."
+              className="pl-9"
+            />
+          </div>
+          <Select value={typeFilter} onValueChange={(v) => setTypeFilter(v as ResourceType | 'all')}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos los tipos</SelectItem>
+              {(Object.entries(RESOURCE_TYPE_LABELS) as [ResourceType, string][]).map(([value, label]) => (
+                <SelectItem key={value} value={value}>{label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Tabla */}
+        {!isLoading && filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 gap-2">
+            <p className="text-[13px] font-medium text-secondary-foreground">
+              {resources.length === 0 ? 'Sin recursos en el catálogo' : 'Sin resultados para esa búsqueda'}
+            </p>
+            <p className="text-[13px] text-muted-foreground">
+              {resources.length === 0 && 'Creá el primer recurso del equipo'}
+            </p>
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Recurso</TableHead>
+                <TableHead>Tipo</TableHead>
+                <TableHead>Costo/h</TableHead>
+                <TableHead>Creado por</TableHead>
+                <TableHead className="text-right">Acciones</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((resource) => (
+                <TableRow key={resource.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2.5">
+                      <ResourceTypeAvatar type={resource.type} size={28} />
+                      <span className="text-[13px] font-medium">{resource.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant="outline"
+                      style={{
+                        background: RESOURCE_TYPE_STYLES[resource.type].bg,
+                        color: RESOURCE_TYPE_STYLES[resource.type].fg,
+                        borderColor: 'transparent',
+                      }}
+                    >
+                      {RESOURCE_TYPE_LABELS[resource.type]}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="font-mono text-[13px]">{formatCurrency(resource.costPerHour)}</TableCell>
+                  <TableCell className="text-[13px] text-muted-foreground">{resource.creatorName}</TableCell>
+                  <TableCell className="text-right">
+                    {confirmingDeleteId === resource.id ? (
+                      <div className="flex items-center justify-end gap-1.5">
+                        <span className="text-[11px] text-muted-foreground">¿Eliminar?</span>
+                        <Button size="sm" variant="destructive" className="h-7 text-[11px]" onClick={() => handleDelete(resource.id)}>
+                          Sí
+                        </Button>
+                        <Button size="sm" variant="outline" className="h-7 text-[11px]" onClick={() => setConfirmingDeleteId(null)}>
+                          No
+                        </Button>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-end gap-1">
+                        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" onClick={() => startEdit(resource)}>
+                          <Pencil className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive" onClick={() => setConfirmingDeleteId(resource.id)}>
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                      </div>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+
+      <ResourceFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        resource={editing}
+        onSave={handleSave}
+      />
+    </div>
+  )
+}

src/features/resources/ResourceFormSheet.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+import { Check } from 'lucide-react'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { RESOURCE_TYPE_LABELS } from './resource-display'
+import type { Resource, ResourceType } from '@/domain/types'
+
+interface ResourceFormState {
+  name: string
+  type: ResourceType
+  costPerHour: string
+}
+
+const EMPTY_FORM: ResourceFormState = { name: '', type: 'role', costPerHour: '' }
+
+interface ResourceFormSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  resource?: Resource
+  onSave: (resource: Resource) => Promise<void>
+}
+
+export function ResourceFormSheet({ open, onOpenChange, resource, onSave }: ResourceFormSheetProps) {
+  const [form, setForm] = useState<ResourceFormState>(EMPTY_FORM)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setForm(
+        resource
+          ? { name: resource.name, type: resource.type, costPerHour: resource.costPerHour.toString() }
+          : EMPTY_FORM
+      )
+    }
+  }, [open, resource])
+
+  async function handleSubmit() {
+    if (!form.name.trim()) return
+    setSaving(true)
+    try {
+      await onSave({
+        id: resource?.id ?? uuidv4(),
+        name: form.name.trim(),
+        type: form.type,
+        costPerHour: parseFloat(form.costPerHour) || 0,
+      })
+      onOpenChange(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>{resource ? 'Editar recurso' : 'Nuevo recurso'}</SheetTitle>
+        </SheetHeader>
+
+        <div className="space-y-4 mt-6">
+          <div className="space-y-1.5">
+            <Label className="text-xs">Nombre</Label>
+            <Input
+              autoFocus
+              placeholder="ej. Analista Senior"
+              value={form.name}
+              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">Tipo</Label>
+            <Select value={form.type} onValueChange={(v) => setForm((f) => ({ ...f, type: v as ResourceType }))}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {(Object.entries(RESOURCE_TYPE_LABELS) as [ResourceType, string][]).map(([value, label]) => (
+                  <SelectItem key={value} value={value}>{label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">Costo por hora</Label>
+            <Input
+              type="number"
+              min={0}
+              step={5}
+              placeholder="0.00"
+              value={form.costPerHour}
+              onChange={(e) => setForm((f) => ({ ...f, costPerHour: e.target.value }))}
+              className="font-mono"
+            />
+          </div>
+        </div>
+
+        <SheetFooter className="mt-6">
+          <Button onClick={handleSubmit} disabled={!form.name.trim() || saving} className="gap-1.5">
+            <Check className="h-4 w-4" />
+            {resource ? 'Actualizar' : 'Crear'}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}

src/features/resources/resource-display.tsx

@@ -0,0 +1,36 @@
+import { User, Briefcase, Server, Wrench, Package, type LucideIcon } from 'lucide-react'
+import type { ResourceType } from '@/domain/types'
+
+export const RESOURCE_TYPE_LABELS: Record<ResourceType, string> = {
+  person: 'Persona',
+  role: 'Rol',
+  system: 'Sistema',
+  equipment: 'Equipo',
+  supply: 'Insumo',
+}
+
+interface ResourceTypeStyle {
+  icon: LucideIcon
+  bg: string
+  fg: string
+}
+
+export const RESOURCE_TYPE_STYLES: Record<ResourceType, ResourceTypeStyle> = {
+  person: { icon: User, bg: '#FEF3E7', fg: '#F59845' },
+  role: { icon: Briefcase, bg: '#FEF3E7', fg: '#D97706' },
+  system: { icon: Server, bg: '#EEF2FF', fg: '#6366F1' },
+  equipment: { icon: Wrench, bg: '#F0FDF4', fg: '#16A34A' },
+  supply: { icon: Package, bg: '#F1F5F9', fg: '#64748B' },
+}
+
+export function ResourceTypeAvatar({ type, size = 32 }: { type: ResourceType; size?: number }) {
+  const { icon: Icon, bg, fg } = RESOURCE_TYPE_STYLES[type]
+  return (
+    <div
+      className="flex items-center justify-center rounded-full flex-shrink-0"
+      style={{ width: size, height: size, background: bg }}
+    >
+      <Icon style={{ color: fg, width: size * 0.55, height: size * 0.55 }} />
+    </div>
+  )
+}

src/features/workspace/ResourcesPanel.tsx

@@ -1,202 +1,97 @@
 import { useState } from 'react'
-import { PlusCircle, Pencil, Trash2, Check, X } from 'lucide-react'
-import { v4 as uuidv4 } from 'uuid'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+import { useNavigate } from '@tanstack/react-router'
+import { Plus, ExternalLink } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useProcessStore } from '@/store/process-store'
 import { useAuth } from '@/auth/AuthContext'
 import { formatCurrency } from '@/lib/format'
-import type { Resource, ResourceType } from '@/domain/types'
-
-const RESOURCE_TYPE_LABELS: Record<ResourceType, string> = {
-  role: 'Rol',
-  person: 'Persona',
-  system: 'Sistema',
-  equipment: 'Equipo',
-  supply: 'Insumo',
-}
-
-const RESOURCE_TYPE_COLORS: Record<ResourceType, string> = {
-  role: 'bg-slate-100 text-slate-600',
-  person: 'bg-green-100 text-green-700',
-  system: 'bg-purple-100 text-purple-700',
-  equipment: 'bg-amber-100 text-amber-700',
-  supply: 'bg-slate-100 text-slate-700',
-}
-
-interface ResourceFormState {
-  name: string
-  type: ResourceType
-  costPerHour: string
-}
-
-const EMPTY_FORM: ResourceFormState = { name: '', type: 'role', costPerHour: '' }
+import { RESOURCE_TYPE_LABELS, ResourceTypeAvatar } from '@/features/resources/resource-display'
+import { ResourceFormSheet } from '@/features/resources/ResourceFormSheet'
+import type { Resource } from '@/domain/types'
 
 export function ResourcesPanel() {
-  const { currentProcess, resources, addResource, updateResource, deleteResource } = useProcessStore()
+  const { activities, resources, addResource } = useProcessStore()
   const { user } = useAuth()
-  const [showForm, setShowForm] = useState(false)
-  const [editingId, setEditingId] = useState<string | null>(null)
-  const [form, setForm] = useState<ResourceFormState>(EMPTY_FORM)
+  const navigate = useNavigate()
+  const [sheetOpen, setSheetOpen] = useState(false)
 
-  function startAdd() {
-    setForm(EMPTY_FORM)
-    setEditingId(null)
-    setShowForm(true)
-  }
+  const usedResourceIds = new Set(
+    activities.flatMap((a) => a.assignedResources ?? []).map((ar) => ar.resourceId)
+  )
+  const usedResources = resources.filter((r) => usedResourceIds.has(r.id))
+  const usageCount = (resourceId: string) =>
+    activities.filter((a) => (a.assignedResources ?? []).some((ar) => ar.resourceId === resourceId)).length
 
-  function startEdit(resource: Resource) {
-    setForm({ name: resource.name, type: resource.type, costPerHour: resource.costPerHour.toString() })
-    setEditingId(resource.id)
-    setShowForm(true)
-  }
-
-  function cancelForm() {
-    setShowForm(false)
-    setEditingId(null)
-    setForm(EMPTY_FORM)
-  }
-
-  async function handleSubmit() {
-    if (!form.name.trim() || !currentProcess) return
-    const costPerHour = parseFloat(form.costPerHour) || 0
-
-    if (editingId) {
-      const existing = resources.find((r) => r.id === editingId)
-      if (!existing) return
-      await updateResource({ ...existing, name: form.name.trim(), type: form.type, costPerHour }, user!.id)
-    } else {
-      const newResource: Resource = {
-        id: uuidv4(),
-        name: form.name.trim(),
-        type: form.type,
-        costPerHour,
-      }
-      await addResource(newResource, user!.id)
-    }
-    cancelForm()
+  async function handleSave(resource: Resource) {
+    await addResource(resource, user!.id)
   }
 
   return (
-    <ScrollArea className="h-full">
-      <div className="p-4 space-y-4">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-xs font-medium text-slate-700">Recursos del proceso</p>
-            <p className="text-xs text-slate-400">{resources.length} definido{resources.length !== 1 ? 's' : ''}</p>
-          </div>
-          {!showForm && (
-            <Button size="sm" variant="outline" onClick={startAdd} className="h-7 text-xs gap-1">
-              <PlusCircle className="h-3.5 w-3.5" />
-              Nuevo
-            </Button>
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 pb-3 border-b border-slate-100">
+        <p className="text-xs font-medium text-slate-700">Recursos</p>
+        <Button
+          size="sm"
+          onClick={() => setSheetOpen(true)}
+          className="h-7 text-xs gap-1 text-white"
+          style={{ background: '#F59845' }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Nuevo
+        </Button>
+      </div>
+
+      {/* Cuerpo */}
+      <ScrollArea className="flex-1">
+        <div className="p-4 space-y-3">
+          <p className="text-xs font-medium text-slate-500">
+            Usados en este proceso <span className="text-slate-400">({usedResources.length})</span>
+          </p>
+
+          {usedResources.length === 0 ? (
+            <div className="text-center py-8">
+              <p className="text-xs text-slate-400">Ningún recurso asignado a actividades aún</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {usedResources.map((resource) => (
+                <div
+                  key={resource.id}
+                  className="flex items-center gap-2.5 p-3 rounded-lg border border-slate-100 bg-white"
+                >
+                  <ResourceTypeAvatar type={resource.type} size={32} />
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center justify-between gap-2">
+                      <p className="text-xs font-medium text-slate-800 truncate">{resource.name}</p>
+                      <p className="text-xs text-slate-500 font-mono shrink-0">{formatCurrency(resource.costPerHour)}/h</p>
+                    </div>
+                    <p className="text-[11px] text-slate-400 mt-0.5">
+                      {RESOURCE_TYPE_LABELS[resource.type]} · {usageCount(resource.id)} actividad{usageCount(resource.id) !== 1 ? 'es' : ''}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
           )}
         </div>
+      </ScrollArea>
 
-        {/* Formulario */}
-        {showForm && (
-          <div className="border border-primary/20 bg-primary/5 rounded-lg p-3 space-y-3">
-            <p className="text-xs font-semibold text-slate-700">{editingId ? 'Editar recurso' : 'Nuevo recurso'}</p>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs">Nombre</Label>
-              <Input
-                autoFocus
-                placeholder="ej. Analista Senior"
-                value={form.name}
-                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-                className="h-8 text-xs"
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs">Tipo</Label>
-              <Select value={form.type} onValueChange={(v) => setForm((f) => ({ ...f, type: v as ResourceType }))}>
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {(Object.entries(RESOURCE_TYPE_LABELS) as [ResourceType, string][]).map(([value, label]) => (
-                    <SelectItem key={value} value={value} className="text-xs">{label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs">Costo por hora</Label>
-              <Input
-                type="number"
-                min={0}
-                step={5}
-                placeholder="0.00"
-                value={form.costPerHour}
-                onChange={(e) => setForm((f) => ({ ...f, costPerHour: e.target.value }))}
-                className="h-8 text-xs font-mono"
-              />
-            </div>
-
-            <div className="flex gap-2">
-              <Button size="sm" onClick={handleSubmit} disabled={!form.name.trim()} className="flex-1 h-7 text-xs gap-1">
-                <Check className="h-3.5 w-3.5" />
-                {editingId ? 'Actualizar' : 'Crear'}
-              </Button>
-              <Button size="sm" variant="ghost" onClick={cancelForm} className="h-7 text-xs">
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* Lista */}
-        {resources.length === 0 && !showForm ? (
-          <div className="text-center py-8">
-            <p className="text-xs text-slate-400 mb-2">Sin recursos definidos</p>
-            <p className="text-xs text-slate-300">Los recursos (roles, sistemas, equipos) se asignan a actividades para calcular su costo por hora</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {resources.map((resource) => (
-              <div
-                key={resource.id}
-                className="flex items-center justify-between p-3 rounded-lg border border-slate-100 hover:border-slate-200 bg-white group"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2 mb-1">
-                    <p className="text-xs font-medium text-slate-800 truncate">{resource.name}</p>
-                    <span className={`shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded-full ${RESOURCE_TYPE_COLORS[resource.type]}`}>
-                      {RESOURCE_TYPE_LABELS[resource.type]}
-                    </span>
-                  </div>
-                  <p className="text-xs text-slate-500 font-mono">{formatCurrency(resource.costPerHour)}/hora</p>
-                </div>
-                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-slate-400 hover:text-slate-600"
-                    onClick={() => startEdit(resource)}
-                  >
-                    <Pencil className="h-3 w-3" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-slate-400 hover:text-destructive"
-                    onClick={() => deleteResource(resource.id, user!.id)}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
+      {/* Footer */}
+      <div className="p-4 pt-3 border-t border-slate-100 space-y-2">
+        <p className="text-[11px] text-slate-400 text-center">Recursos del catálogo global del equipo</p>
+        <Button
+          variant="outline"
+          className="w-full h-8 text-xs gap-1.5"
+          onClick={() => navigate({ to: '/recursos' })}
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          Ver catálogo completo
+        </Button>
       </div>
-    </ScrollArea>
+
+      <ResourceFormSheet open={sheetOpen} onOpenChange={setSheetOpen} onSave={handleSave} />
+    </div>
   )
 }

src/persistence/supabase/resource-repo.ts

@@ -10,6 +10,19 @@ function fromRow(row: Record<string, unknown>): Resource {
   }
 }
 
+// Solo para display — no es parte del dominio puro (mismo patrón que ProcessWithUserNames, Etapa 6)
+export interface ResourceWithCreator extends Resource {
+  creatorName: string
+}
+
+function fromRowWithCreator(row: Record<string, unknown>): ResourceWithCreator {
+  const creator = row.creator as { name: string | null } | null
+  return {
+    ...fromRow(row),
+    creatorName: creator?.name ?? 'Desconocido',
+  }
+}
+
 export const supabaseResourceRepo = {
   async save(resource: Resource, userId: string): Promise<void> {
     const { error } = await supabase.from('resources').upsert({
@@ -33,7 +46,27 @@ export const supabaseResourceRepo = {
     return (data ?? []).map(fromRow)
   },
 
+  // JOIN con users para resolver "creado por" en una sola query (mismo patrón que Etapa 6)
+  async getAllWithCreator(): Promise<ResourceWithCreator[]> {
+    const { data, error } = await supabase
+      .from('resources')
+      .select('*, creator:users!created_by(name)')
+      .order('name', { ascending: true })
+    if (error) throw error
+    return (data ?? []).map((row) => fromRowWithCreator(row as Record<string, unknown>))
+  },
+
+  // No elimina si el recurso tiene asignaciones activas en activity_resource_assignments
   async delete(resourceId: string): Promise<void> {
+    const { count, error: countError } = await supabase
+      .from('activity_resource_assignments')
+      .select('*', { count: 'exact', head: true })
+      .eq('resource_id', resourceId)
+    if (countError) throw countError
+    if ((count ?? 0) > 0) {
+      throw new Error('Este recurso está asignado a actividades — quitá las asignaciones antes de eliminarlo')
+    }
+
     const { error } = await supabase.from('resources').delete().eq('id', resourceId)
     if (error) throw error
   },

src/router.tsx

@@ -4,6 +4,7 @@ import { WorkspacePage } from '@/features/workspace/WorkspacePage'
 import { ImportPage } from '@/features/import/ImportPage'
 import { LibraryPage } from '@/features/library/LibraryPage'
 import { SettingsPage } from '@/features/settings/SettingsPage'
+import { ResourceCatalogPage } from '@/features/resources/ResourceCatalogPage'
 import { LoginPage } from '@/features/login/LoginPage'
 import { useAuth } from '@/auth/AuthContext'
 import { Loader2 } from 'lucide-react'
@@ -94,6 +95,12 @@ const settingsRoute = createRoute({
   component: SettingsPage,
 })
 
+const resourcesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/recursos',
+  component: ResourceCatalogPage,
+})
+
 const routeTree = rootRoute.addChildren([
   loginRoute,
   indexRoute,
@@ -101,6 +108,7 @@ const routeTree = rootRoute.addChildren([
   workspaceRoute,
   reportRoute,
   settingsRoute,
+  resourcesRoute,
 ])
 
 export const router = createRouter({ routeTree })