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/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>
+  )
+}